es6-es11系列8 Webpack和Babel的配置

简单来说webpack的作用就是把我们发环境的代码打包成生成环境的代码

核心概念

entry 入口的职责是要把什么进行编译
output 出口的作用是编译后成什么样子
Loader 进行文件的转换,作用是文件编译
plugin 文件转换后增强一系列的后续操作,可以理解为管道,不参与文件的编译
mode 开发环境还是生成环境

webpack配置

先放出来最终代码地址,如果你赖的自己敲可以复制对应的代码:https://github.com/yjxf8285/webpack-learn

1 首先创建一个项目文件夹,然后在终端中使用npm init -y 命令生成package.json文件,例如:

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

熟悉webpack核心概念
1.1 安装必要的3个依赖

"devDependencies": {
    "webpack": "4.43.0",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.11.0"
  }

1.2 创建webpack配置文件webpack.config.js

module.exports = {
    mode: 'development',
    // mode: 'production', // 编译后的文件会压缩
    entry: './src/index.js',
    output: {
        filename: 'index.js' // 指定输入文件的文件名
    },
}

1.3 执行编译
创建src目录,并在src目录下新建index.js文件,然后执行npx webpack命令,会生成dist目录和index.js编译后的文件

1.4 使用模板插件和拷贝文件
先安装下面这两个插件的依赖,注意版本号

"devDependencies": {
    "copy-webpack-plugin": "5.1.1",
    "html-webpack-plugin": "4.3.0",
    ...

配置文件中添加对应的配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    mode: 'development',
    // mode: 'production', // 编译后的文件会压缩
    entry: './src/index.js',
    output: {
        filename: 'index.js' // 指定输入文件的文件名
    },
    plugins: [
        // new HtmlWebpackPlugin() // 编译后自动生成html文件并引入出口的js文件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 手动指定index.html的模板
        }),
        new CopyPlugin([{ from: "static", to: "static" }]), // 拷贝文件到编译后的目录
    ]
}

src目录下创建index.html模板文件,根目录创建static文件夹,然后在里面新建一些js文件。再执行编译后,可以在dist目录下得到对应的模板和拷贝过去的静态文件

2 拆分配置文件,分别为开发环境和生产环境
需要安装2个依赖,后面要用

  "devDependencies": {
    "webpack-merge": "4.2.2",
    "clean-webpack-plugin": "3.0.0",
    ...

新建一个build目录,然后创建4个文件
webpack.base.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js' // 指定输入文件的文件名
    },
    plugins: [
        // new HtmlWebpackPlugin() // 编译后自动生成html文件并引入出口的js文件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 手动指定index.html的模板
        }),
        new CopyPlugin([{ from: "static", to: "static" }]), // 拷贝文件到编译后的目录
    ]
}

webpack.dev.config.js

module.exports = {
    devtool: 'cheap-module-eval-source-map' // 生成一个没有列信息(column-mappings)的 SourceMaps 文件,同时 loader 的 sourcemap 也被简化为只包含对应行的。
}

webpack.pro.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    plugins: [
        new CleanWebpackPlugin() // 每次编译会自动删除dist目录
    ]
}

webpack.config.js

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')

module.exports = (env, argv) => {
    const config = argv.mode === 'development' ? devConfig : proConfig
    return merge(baseConfig, config)
}

在package.json中编辑运行脚本

 "scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  },

现在可以根据脚本中指定的mode加载不同的配置文件,并merge基本的配置文件了

3 添加babel支持
先安装3个依赖

"@babel/core": "7.9.6",
"@babel/preset-env": "7.9.6",
"babel-loader": "8.1.0",

在webpack.base.config.js中添加规则

   module: {
        rules: [{
            test: /\.js$/, // 匹配js结尾的文件
            exclude: /node_modules/, // 排除依赖包目录
            use: {
                loader: 'babel-loader', // 使用哪个loader来翻译
                options: {
                    presets: [ // 
                        ['@babel/preset-env', {  // @babel/preset-env 根据指定的执行环境提供语法装换,也提供配置 polyfill。
                            // "useBuiltIns": false, // 不对 polyfill 做操作。
                            "useBuiltIns": "entry" // 根据配置的浏览器兼容版本范围,引入浏览器不兼容的 polyfill
                        }]
                    ]
                }
            }
        }]
    }

现在项目支持es11语法了,可以试试,如果不行,看看和实例代码的项目有什么区别。

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:97 次浏览