开始使用webpack

---

作者：叶茂；
标签: webpack

---

webpack配置文件

• webpack配置文件是使用webpack的核心，会配置webpack.config.js就会使用webpack了。

mode

• 可选的值'production'、'development'和'none'，默认'production'。
• webpack4 新增的配置项，针对不同的环境进行了不同的优化，能满足基本需求。
• 可以在配置文件中设置，也可以在命令行中传参。

// webpack.config.js
module.exports = {
    mode: 'production'
}

webpack --mode=production

context

• 值是一个绝对路径，指定entry和loader的解析开始位置。
• 默认值是当前的工作路径，当你没有指定确定值时，它的值会根据当前的工作路径变化，这会影响到entry和loader中有关文件相对路径定义时的具体值。

context: __dirname

entry

• 入口文件,指定webpack从哪里开始解析依赖树。

entry: './src/main.js' // 相对路径，先对于context
entry: path.resolve(__dirname, './src/main.js') // 绝对路径

// 多入口写法
entry: {
    main1: './src/main1.js',
    main2: './src/main2.js'
}

• 在搞不清楚webpack执行上下文的时候，使用绝对路径是一个相对安全的做法。

output

• 输出目录，指定打包后的文件输出的位置。

output: {
    path: ${工作路径} + '/dist' // 默认 // 这是一行伪代码
    filename: 'main.js'
    publicPath: '/public/' // 相关静态文件路劲前会添加该字符串
}

module.rules

• 配置各种loader处理不同的文件。
• url-loader可以处理引入的文件，返回文件的打包路径。
• 可以解决静态文件的缓存问题。
• 当你想换一个目录或服务器存放静态文件时，你只需要修改配置即可。

module: {
    rules: [
        test: /\.(png|jpg|jpeg|gif|webp)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'image/[name].[hash:8].[ext]',
            },
        }
    ]
}

• 例如：

body {
    background: url('./image.png');
}

--- 打包 ===>

body {
    background: url('/publicPath/image/image.hash123123.png')
}

plugins

• plugin官方文档
• html-webpack-plugin设置模板文件, 会复制模板文件，在进行你想要的处理之后输出到目标目录,默认会将打包好的js文件自动引入body标签的底部。

// 可以同时使用多次
plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(APP_PATH, './template/src/oldmain.tpl'), // 模板文件的位置
      filename: path.resolve(APP_PATH, './template/template.tpl'), // 输出路径和文件名
    }),

    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
    }), 
]

• webpack.DefinePlugin定义编译时的全局变量，或者设置编译时的程序process.env.NODE_ENV。
• webpack和其他程序如vue或react配合使用时，其他程序通常能在process.env.NODE_ENV中获取当前的运行环境。
• 注意webpack内置插件写在其他插件前面，不然有非常奇怪的bug。

- new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    HOST: "'http://www.baidu.com'"
}),

devtool

• 选择代码的打包方式，是否带source-map等。
• webpack4中默认mode=development时，devtool:'eval'，即代码以eval()方式运行。

devtool: 'source-map'