webpack怎么構(gòu)建工具配置和常用插件

const webpack = require('webpack');
module.exports = {
 mote:"development",//指當(dāng)前的環(huán)境
 /*
 development：開發(fā)環(huán)境
 production:生產(chǎn)環(huán)境
 none:不做任何處理
 */
 //入口文件，如果需求多個(gè)入口可改為對(duì)象
  entry: './src/index.js',
  /*
  hot配置是否啟用模塊的熱替換功能，devServer的默認(rèn)行為是在發(fā)現(xiàn)代碼被改后通過自動(dòng)刷新整個(gè)頁面來做到事實(shí)預(yù)覽，然后設(shè)置hot后，
  會(huì)在不刷新整個(gè)頁面的情況下用新模塊替換老模塊來做到實(shí)時(shí)更新。
  如果選用hot：true方式來達(dá)到熱更新的效果需要引用webpack.HotModuleReplacementPlugin插件配合達(dá)到你需要的效果，另外推薦一
  種簡便的方式在package.json中scripts設(shè)置如下
  "scripts": {
   "start": "webpack-dev-server --hot --inline",
  },
  */
  // 服務(wù)器環(huán)境
  devServer: {
   hot: true, //建議使用第二種方案 啟動(dòng)服務(wù)使用命令 npm run start
   port:"8080",//端口默認(rèn)8080,可以自行設(shè)置
   host:"192.168.xx.xx",
   /*
   host配置devServer服務(wù)監(jiān)聽的地址，也可以使用localhost進(jìn)行訪問 瀏覽器輸入192.168.xx.xx/index.html
   簡便方法在package.json中設(shè)置如下
   "scripts": {
   "start": "webpack-dev-server --hot --inline ",
   },
   */
   
  },
  //插件
  plugins: [
   //熱加載插件
   new webpack.HotModuleReplacementPlugin(), 
  ],
  //輸出
  output: {
   //filename：輸出的文件名，可以自定義一些規(guī)則
   filename: '[name].bundle.js',
   //path，配置輸出文件存放在本地的目錄
   path: path.resolve(__dirname, 'dist')
  }
 }; 

const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
  new HtmlWebpackPlugin({ // 打包輸出HTML
   title: 'Hello World',//文件的標(biāo)題
   minify: { //minify 的作用是對(duì) html 文件進(jìn)行壓縮
    removeComments: true, // 移除HTML中的注釋
    collapseWhitespace: true, // 刪除空白符與換行符
    minifyCSS: true, // //是否壓縮html里的css 默認(rèn)值false；
    caseSensitive: true, //是否對(duì)大小寫敏感，默認(rèn)false
    ollapseWhitespace: true, //是否去除空格，默認(rèn)false
    minifyJS: true, //是否壓縮html里的js
    removeAttributeQuotes: true, //是否移除屬性的引號(hào) 默認(rèn)false
    removeComments: true, //是否移除注釋 默認(rèn)false
    emoveCommentsFromCDATA: true, //從腳本和樣式刪除的注釋 默認(rèn)false
    emoveEmptyAttributes: true, //是否刪除空屬性，默認(rèn)false
    removeRedundantAttributes: true, //刪除多余的屬性
    removeScriptTypeAttributes: true, //刪除script的類型屬性，在h6下面script的type默認(rèn)值：text/javascript 默認(rèn)值false
   },
   filename: 'index.html', //輸出的html的文件名稱
   template: 'index.html', //html模板在的文件路徑
   hash: true,//hash作用是給生成的js文件一個(gè)獨(dú)特的hash值，默認(rèn)值為false 被構(gòu)建過后的html引用js效果如下
   // <script type=text/javascript src=bundle.js&#63;22b9692e22e7be37b57e></script>
  }),
 ] 

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  //該插件主要用于自動(dòng)刪除webpack里dist目錄中已不需要的文件
  new CleanWebpackPlugin()
] 

npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev

module.exports = {
 module : {
    rules: [
      {
        test: /\.css$/,
        use:[
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 module : {
  rules: [
    {
      test: /\.css$/,
      use : ExtractTextPlugin.extract({
       fallback: "style-loader",
        use: "css-loader"
      })
    }
    /*
  use: 指需要什么樣的loader去編譯文件
  fallback: 編譯后用什么loader來提取css文件
  */
   ]
 },
 plugins: [
   new ExtractTextPlugin("styles.css"),
   new HtmlWebpackPlugin({ // 關(guān)于HtmlWebpackPlugin上文有提到
      title: 'extract-text-webpack-plugin',
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      inject : 'head'
    })
 ]
}