webpack入门

标签：代码   option   添加   常见   指定   html模板   slist   test   ons   

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
              }
          })
      ]

4. loader：预处理。处理从右到左
   1. css-loader: 处理css文件里面的@import和url之类的
   2. style-loader：将css文件的内容插入style标签内并插入head中
5. 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‘]
          }
      }
   }

6. postcss-loader：使用javascript的工具或者插件来预处理css的工具。
7. 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‘]
                                   })
                               ]
                           }
                       },
                   ]
               },
           ]
   }

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

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

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

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

webpack入门

标签：代码   option   添加   常见   指定   html模板   slist   test   ons   

原文地址：https://www.cnblogs.com/longlongdan/p/10945192.html