webpack入门

1. entry：对象，字符串, 数组（数组会被打包成一个文件，正确的多入口多出口应该使用对象形式）
2. output： path-目标输出的绝对路径，filename-输出文件的文件名：[name]，[hash]，[chunkhash]

   module.exports = {
       entry: './src/index.js',
       output: {
           filename: 'main.js',
           path: path.resolve(__dirname, 'dist'),
           publicPath: 'dist/'
       }
   }

3. plugin：插件 html-webpack-plugin自动生成html代码。

• filename，inject （放置script标签的地方，head，body，false，true），template，title（htmlWebpackPlugin.options.title可以在html模板里面取值）,minify(压缩，值为一个对象，不可以直接写true，具体配置参考文档)，chunks：引入的js， 我们entry入口的key值，excludeChunks:排除的chunks；

  plugins: [
          new htmlWebpackPlugin({
              filename: 'index.html',
              template: './index.html',
              inject: 'body',
              chunks: ['one'],
              minify: {
                  removeComments: true,
                  removeAttributeQuotes: true
              }
          })
      ]

loader：预处理。处理从右到左(所有laoder都可以使用 options来传入参数)

{
     loader: ''，
     options: {
        XX: xx
     }         
}    

1. css-loader: 处理css文件里面的@import和url之类的
2. style-loader：将css文件的内容插入style标签内并插入head中

babe：presets指定javascript版本，excludes和includes优化速度。babel-loader @babel/core @babel/preset-env这三个都需要安装

{
   test: /\.js$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
       options: {
          presets: ['@babel/preset-env']
       }
   }
}

postcss-loader：使用javascript的工具或者插件来预处理css的工具。 postcss可以使用的常见插件： https://www.zcfy.cc/article/7-postcss-plugins-to-ease-you-into-postcss-603.html

 module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    { 
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    overrideBrowserslist: ['last 10 versions']
                                })
                            ]
                        }
                    },
                ]
            },
        ]
}

css文件使用@import引入的文件，需要给cssloader加上参数importLoaders=1才可以让引入的文件也添加浏览器前缀，less和scss文件不需要

 

webpack执行命令可以携带的参数

　　使用实例：webpack --progres --colors --xxx

1. --watch 监听变动并自动打包
2. --progress 显示进度条
3. --config XXX.js 指定特定的打包文件来进行打包
4. --color 添加颜色
5. 自定义参数

转载于:https://www.cnblogs.com/longlongdan/p/10945192.html