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

4. loader：預處理。處理從右到左(全部laoder均可以使用options來傳入參數)

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

   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. 自定義參數