Webpack系列-基础篇

基本配置

    module.exports = {
        mode:'development',
        entry:{
            main:'./src/index.js'
        },
        output:{
            filename:[name].js,
            path:path.resolve('dist')
        },
        module:{
            
        },
        plugins:[
            
        ]
    }
复制代码

CSS相关

• loader顺序从右往左 css-loader、style-loader
• postcss-loader的作用是将添加兼容前缀例如:box-sizing -webkit-box-sizing,并且postcss要在css之前
• MiniCssExtractPlugin 抽离出样式为单独的css文件，并且取代之前的style-load的位置
• enforce 参数为改变loader的加载顺序，post就是在最后加载当前的loader
• OptimizeCss webpack4内置的压缩css配置

    // webpack.config.js
    optimization:{ // 只在开发环境下生效
        minimizer:[ 
          new OptimizeCss()
        ]
    },
    module:{
        rules:[
             { test: /\.css$/, use: 'css-loader' },
             { test: /\.css$/, use: 'postcss-loader' },
             { test: /\.css$/, use: MiniCssExtractPlugin.loader, enforce: 'post' },
             { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','less-loader'] }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
          filename:'main.css'
        })  
    ]
    // postcss.config.js
    module.exports = {
      plugins:[
        require('autoprefixer')
      ]
    }
    
复制代码

JS相关

• 代码检查eslint
• expose-loader 导出模块作为全局属性
• ProvidePlugin 定义一个变量来当做引用的模块
• externals 排除打包的模块
• UglifyJSPlugin 压缩js代码
• devServer 开发服务器

    optimization:{ 
        minimizer:[ 
          new UglifyJSPlugin({
            cache:true,
            parallel:true, 
            sourceMap:true
          })
        ]
    },
    devServer: {
        contentBase: './dist',
        port:3000
      },
    externals:{ // 排除掉 jquery打包
        'jquery':'$'
    },
    plugins:[
        new webpack.ProvidePlugin({
          '$':'jquery' // 这个$ 并不是全局的
        }),
    ],
    module:{
        rules:[
            {
              test:/\.js$/,
              enforce:'pre', // 必须在前面执行 先校验代码
              use:'eslint-loader'
            },
            { 
                test:/\.js$/,
                exclude:/node_modules/, // 排除查找node_modules目录
                include:path.resolve('src'),
                use:{
                  loader: 'babel-loader',
                  options:{
                    // arrowFnPlugin ....  如有有一些新api不能使用需要使用babel-polyfill
                    presets: ['@babel/preset-env'],
                    // 转化 js运行时的api 方法(例如promise不会引入全局的而是引入runtime下的promise) 并且可以优化js 抽离公共部分
                    plugins:['@babel/plugin-transform-runtime']
                  }
                }
            },
            {
              test:require.resolve('jquery'),
              use:'expose-loader?$'
            },
        ]
    }
复制代码

Html相关

    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      chunks: ['main']
    })
复制代码

图片相关

• 在js中和css中引入图片 需要用到file-loader（复制文件到dist目录）或者url-loader
• html-withimg-loader 是在html文件中直接通过src引入图片。

    rules:[
        {
        test:/\.(png|jpg|gif)$/,
            // url可以传递一个参数  limit 限制大小在限制之内那么内容会变成base64,如果大于了限制 就会用file-loader
            use:{
              loader:'url-loader',
              options:{
                limit:200*1024
              }
            }
          },
          {
            test:/\.html$/,
            use:'html-withimg-loader'
          },
    ]
复制代码