写给自己看的Webpack配置

最后更新时间：2021年08月21日

最近有复习了一遍webpack，想着把webpack配置与优化记录下来，忘记的时候可以来翻一翻.

webpack核心

  • wentry: 入口
  • output: 输出
  • loader: 模块转换器，用于把模块原内容按照需求转换成新内容
  • 插件(plugins): 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你* 想要做的事情ebpack核心
  • exclude排除目录
  • rules是一个数组
  • loader需要配置在module.rules
  • test是匹配规格
    use 字段有几种写法
  1. 可以是一个字符串 use: 'babel-loader'
  2. use 字段可以是一个数组，例如处理CSS文件是，use: ['style-loader', 'css-loader']
  3. use 数组的每一项既可以是字符串也可以是一个对象，当我们需要在webpack 的配置文件中对 loader 进行配置，就需要将其编写为一个对象，并且在此对象的 options 字段中进行配置.
    • mode 配置项，告知 webpack 使用相应模式的内置优化
      mode 配置项，支持以下两个配置:

  4. development：将 process.env.NODE_ENV 的值设置为 development，启用 NamedChunksPlugin 和 NamedModulesPlugin

  5. production：将 process.env.NODE_ENV 的值设置为 production，启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

    准备工作

    • npm install -S===npm install --save1 npm install -D===npm install --save-dev
    • –save会把依赖包名称添加到package.json文件dependencies键下，–save-dev则添加到package.json文件devDependencies键下
    • dependencies与devDependencies的区别
    • devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

创建项目

  • mkdir webpack
  • cd webpack
  • npm init -y

安装webpack

  • npm install webpack webpack-cli -D
  • 创建src目录，在src目录下新建一个index.js
  • 创建public目录，在public目录下新建index.html
  • 创建assets目录，在assets目录下新建css、images目录，分别存放我们的css与图片文件.
  • 创建webpack配置文件webpack.config.js
  • 配置入口与出口打包模式 
    //入口配置
//入口配置
entry: './src/index.js',
//出口配置
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'static/js/[name]_[hash:6].[chunk].js',
    publicPath: '/'
},
//打包模式
mode: 'development',

设置热更新

  • 安装webpack-dev-server npm install webpack-dev-server cross-env -D

  • package.json写入

    "scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack"
}
  • 在webpack.config.js中写入 
    module.exports = {
//...
devServer: {
    port: '3000', //默认是8080
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: false, //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
}
}

每次打包删除dist文件夹

  • 安装npm install clean-webpack-plugin -D，引入 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//每次打包删除dist文件
plugins:[
    new CleanWebpackPlugin()
]

Webpack配置html

  1. HtmlWebpackPlugin插件.
    • 安装npm install html-webpack-plugin -D 引入webpack中const HtmlWebpackPlugin=require('html-webpack-plugin')
  • 使用 
    plugins:[
new HtmlWebpackPlugin({
  //html文件路径
    template: './src/public/index.html',
    filename: 'index.html', //打包后的文件名
    minify: {
            removeAttributeQuotes: false, //是否删除属性的双引号
            collapseWhitespace: false, //是否折叠空白
        },
    //chunks:['index']//引用的js文件
    // hash: true //是否加上hash，默认是 false
})
]

    多个html配置，需要添加多个HtmlWebpackPlugin``template与filename以及chunks，同时需要配置多个入口文件entry 更多配置查看文档 传送门

Webpack配置css

如果使用scss需要安装node-sass与sass-loader，使用less安装less与less-loader.

webpack 不能直接处理 css，需要借助 loader。如果是 .css，我们需要的 loader 通常有： style-loader、css-loader，考虑到兼容性问题，还需要 postcss-loader，而如果是 less 或者是 sass 的话，还需要 less-loader 和 sass-loader，这里配置一下 scss 和 css 文件(less 的话，使用 less-loader即可)

  • style-loader 动态创建 style 标签，将 css 插入到 head 中.
  • css-loader 负责处理 @import 等语句.
  • postcss-loader 和 autoprefixer，自动生成浏览器兼容性前缀.
  • sass-loader 负责处理编译 .scss 文件,将其转为 css.
  • mini-css-extract-plugin抽离css.
  • optimize-css-assets-webpack-plugin压缩css.
    1. 安装css-loader postcss-loader node-sass sass-loader autoprefixer style-loader npm install css-loader postcss-loader node-sass sass-loader autoprefixer style-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin -D
  1. webpack.config.js配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
rules:[
// scss css文件处理
          {
            test: /\.(sc|c$)ss$/,
            use:[MiniCssExtractPlugin.loader,'css-loader',{
              loader:'postcss-loader',
              options:{
                plugins:function(){
                   return [
                           require('autoprefixer')({
                           "overrideBrowserslist": [
                           ">0.25%",
                           "not dead"]
                           })
                          ]
                }
              }
            },'sass-loader'],
            exclude:/node_modules/ //排除 node_modules 目录
          },
],
plugins:[
//css文件压缩
    new OptimizeCssPlugin(),
//抽离css
    new MiniCssExtractPlugin({
      filename: '[name]_[hash:6].css'，
      publicPath: '/assets/css'//如果需要单独的css目录，并且使用了url-loader，此项必须填写.
    })
]

如果需要编写兼容低版本的浏览器，可以在postcss-loader添加配置.

  • 建议新建.browserslistrc文件，或在package.json中配置

    # 注释是这样写的，以#号开头 #这是browserslistrc文件的通用配置
last 1 version, 
not dead
> 0.2%
  • 修改plugins 
    plugins:[
{
    test: /\.(sc|c$)ss$/,//匹配规则
    use:[MiniCssExtractPlugin.loader,'css-loader',{
      loader:'postcss-loader',
      options:{
        plugins:function(){
          return [
            require('autoprefixer')()
          ]
        }
      }
    },'sass-loader'],
    exclude:/node_modules/
  }
]

webpack将js转义成低版本(babel)

先安装和配置babel

npm install babel-loader -D

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

npm install @babel/runtime @babel/runtime-corejs3

*webpack.config.js写入配置

module.exports = {
    module: {
        rules: [
            {
                test: /\.js?$/,
                use: ['babel-loader'],
                exclude: /node_modules/ //排除 node_modules 目录
            }
        ]
    }
}
  • 创建.babelrc文件

  • 写入配置

    {
"presets": ["@babel/preset-env"],
"plugins": [
    [
        "@babel/plugin-transform-runtime",
        {
            "corejs": 3
        }
    ]
]
}
  • 在webpack中配置babel 
    rules: [
        {
            test: /\.jsx?$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: [
                        [
                            "@babel/plugin-transform-runtime",
                            {
                                "corejs": 3
                            }
                        ]
                    ]
                }
            },
            exclude: /node_modules/
        }
    ]

如果使用了OptimizeCssPlugin压缩css，那么js将不再会被压缩，解决方法如下

  • 安装UglifyjsPlugin
  • npm install uglifyjs-webpack-plugin -D 
    plugins:[
new UglifyjsPlugin({
  // 使用缓存
  cache: true
})
]

图片文件处理

  1. 安装url-loader与file-loader

    • npm install url-loader file-loader -D
    • webapck中添加配置 
      rules: [
    {
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 10240, //10k
                esModule: false,
                //outputPath: 'assets/images', //将图片打包到该目录下
                name: 'assets/images/[name]_[hash:6].[ext]' //文件名添加hash值
            }
        }],
        exclude: /node_modules/
            //排除 node_modules 目录
    }
]
  2. html里的本地图片处理
    • 安装html-withimg-loadernpm
    • npm install html-withimg-loader -D
    • 在webpack.config.js中配置 
      rules: [
{
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
    }
    ]

按需加载

webpack内置了强大的分割代码的功能可以实现按需加载，需要使用 import() 语法，import() 语法，需要 @babel/plugin-syntax-dynamic-import 的插件支持，@babel/preset-env 预设中已经包含了 @babel/plugin-syntax-dynamic-import，配置了@babel/preset-env就不需要再配置@babel/plugin-syntax-dynamic-import了.

定义环境变量

通过webpack内置插件DefinePlugin来区分开发环境与生产环境，DefinePlugin在编译的时候创建一个全局变量，可以在开发环境与生产环节进行不同的行为.

  • webpack.config.js中添加 
    new webpack.DefinePlugin({
  DEV: JSON.stringify('dev'), //字符串
  FLAG: 'true' //FLAG 是个布尔类型
})

区分生产开发环境

DEV=='dev'?'开发环境':'生成环境'

webpack配置解决跨域问题

该跨域只能解决开发环境跨域问题，生产环节需要使用Nginx等web服务器配置，或后端配置跨域.

devServer: {
        proxy: {
            "/api": "http://localhost:4000"
        }
    }

声明：Web前端小站 - 前端博客|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 写给自己看的Webpack配置

行路有良友，便是捷径。带上我吧，一起去看更大的世界。