之前溫習(xí)了 webpack 的概念理論篇，現(xiàn)在讓我們從項(xiàng)目配置文件再來具體學(xué)習(xí) webpack打包配置吧
大多數(shù)時(shí)候我們需要自定義入口文件或添加一些其他的配置參數(shù)，這時(shí)就需要我們一個(gè)配置 webpack 的配置文件，在項(xiàng)目的根目錄中創(chuàng)建其配置文件 webpack.config.js

const path = require('path');
const html = require('html-webpack-plugin'); // 打包HTML文件
const uglify = require('uglifyjs-webpack-plugin') // js文件壓縮
const miniCss = require("mini-css-extract-plugin"); // css文件分離
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 打包前清除dist文件
if(process.env.type== "build"){
  // 開發(fā)環(huán)境url
  var website={
    publicPath:"http://192.168.1.7:1024/"
  }
}else{
  // 生產(chǎn)環(huán)境url
  var website={
    publicPath:"https://www.baidu.com/"
  }
}
module.exports = {
  // source-map:在一個(gè)單獨(dú)文件中產(chǎn)生一個(gè)完整且功能完全的文件。這個(gè)文件具有最好的source map,但是它會(huì)減慢打包速度；
  // cheap-module-source-map:在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號(hào)）,會(huì)對調(diào)試造成不便。
  // eval-source-map:使用eval打包源文件模塊，在同一個(gè)文件中生產(chǎn)干凈的完整版的sourcemap，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開發(fā)階段這是一個(gè)非常好的選項(xiàng)，在生產(chǎn)階段則一定要不開啟這個(gè)選項(xiàng)。
  // cheap-module-eval-source-map:這是在打包文件時(shí)最快的生產(chǎn)source map的方法，生產(chǎn)的 Source map 會(huì)和打包后的JavaScript文件同行顯示，沒有影射列，和eval-source-map選項(xiàng)具有相似的缺點(diǎn)。
  devtool: 'eval-source-map',
  // 入口文件配置項(xiàng)
  entry:{
    // 多入口
    entry:'./src/entry.js',
    // aa: './src/entry1.js'
  },
  // 出口文件配置項(xiàng)
  output: {
    path: path.resolve(__dirname,'dist'), // 打包文件的路徑
    filename: '[name].js', // [name].js  生成的打包文件，同src目錄下一致
    publicPath: website.publicPath // 打包之后的資源路徑
  },
  //插件，用于生產(chǎn)模版和各項(xiàng)功能
  plugins: [
    new CleanWebpackPlugin(), // 打包前清除dist文件
    // 打包HTML文件
    new html({
      minify: false, // 是否壓縮
      hash: false, // 如果true  webpack 為所有包含的腳本和CSS文件 添加唯一的 編譯哈希。 這對緩存清除非常有用
      template: path.resolve(__dirname,'./src/index.html'),  // webpack 需要模板的路徑
      filename: 'index.html' // 要將HTML寫入的文件。 默認(rèn)為 index.html 
    }),
    new uglify(), // js文件壓縮
    new miniCss({ // css文件分離
      filename: 'css/[name].css'
    })
  ],
  //模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮
  module: {
    rules: [
      // css,less文件如何處理
      {
        test: /\.(less|css)$/,
        use: [
          miniCss.loader, // 分離css文件
          'css-loader',
          'postcss-loader', // css增加前綴
          'less-loader',  // 解析less
        ]
      },
      // 圖片如何處理
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 50, // 是把小于50B的文件打成Base64的格式，寫入JS
              outputPath: 'images/',
              esModule:false
            }
          }
        ]
      },
      // html中圖片處理
      {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader']
      },
      // 轉(zhuǎn)換為es6語法
      {
        test:/\.(jsx|js)$/,
        use:{
          loader:'babel-loader'
        },
        exclude:/node_modules/
      }
    ]
  },
  //配置webpack開發(fā)服務(wù)功能，熱更新
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 設(shè)置基本目錄結(jié)構(gòu)
    host: '192.168.1.7', // 服務(wù)器的IP地址
    compress: true, // 服務(wù)端壓縮是否開啟
    port: 1024 // 端口
  }