写给自己看的Webpack配置


最近有复习了一遍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,启用 NamedChunksPluginNamedModulesPlugin

  5. production:将 process.env.NODE_ENV 的值设置为 production,启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPluginUglifyJsPlugin

    准备工作

    • npm install -S===npm install --save1 npm install -D===npm install --save-dev
    • –save会把依赖包名称添加到package.json文件dependencies键下,–save-dev则添加到package.json文件devDependencies键下
    • dependenciesdevDependencies的区别
    • 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目录下新建cssimages目录,分别存放我们的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 引入webpackconst 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``templatefilename以及chunks,同时需要配置多个入口文件entry 更多配置查看文档 传送门

Webpack配置css

如果使用scss需要安装node-sasssass-loader,使用less安装lessless-loader.

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

  • style-loader 动态创建 style 标签,将 css 插入到 head 中.
  • css-loader 负责处理 @import 等语句.
  • postcss-loaderautoprefixer,自动生成浏览器兼容性前缀.
  • 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-loaderfile-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"
        }
    }

声明:前端编程学习记录|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

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


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