webpack4.0基本配置，超簡單！

最近復習了一下webpack，使用的是4.0版本。

下圖是基本目錄結構，最后留有代碼地址，有興趣可以去看看。

 

 

直接上代碼（依賴未完全使用）：

項目的所有依賴都可以安裝，每個都有詳細的注釋。】

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin'); //js壓縮插件
const htmlPlugin = require('html-webpack-plugin'); //實現html打包功能，引用好路徑的到html來
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');// 打包前先清空dist
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//分離js中的css
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");//css壓縮
const webpack = require('webpack');

const devMode = process.env.NODE_ENV !== 'production';

var website = {
  publicPath: "http://localhost:8888/"
  // publicPath:"http://192.168.1.103:8888/"
}

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else { 
    return false;
  }
}

module.exports = {
  mode: 'production', // 模式配置 production,development
  entry: { //入口文件配置
    main: path.resolve(__dirname, './src/main.js'),
    main2: path.resolve(__dirname, './src/main2.js'),
  },
  output: { //出口文件配置
    //path.resolve把一個路徑或路徑片段的序列解析為一個絕對路徑
    path: path.resolve(__dirname, './dist'), // 打包后的目錄，必須是絕對路徑
    filename: '[name].[hash:4].js', // [name]打包后的文件名稱,進入是什么名字出來也是
    chunkFilename: '[name].[hash].js',//文件開啟按需加載后，會生成多個小文件
    // 2.添加hash可以防止文件緩存，每次都會生成4位的hash串
    // filename: 'bundle.[hash:4].js',   
    // path: path.resolve(__dirname, '../dist')
    publicPath: website.publicPath //publicPath：主要作用就是處理靜態文件路徑的。
  },
  //模塊，例如解讀CSS，圖片轉換，壓縮
  module: {
    rules: [
      //babel 配置
      {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader?cacheDirectory',//loader的cacheDirectory選項，開啟后用緩存，提升打包速度
        },
        include: /src/,          // 只轉化src目錄下的js
        exclude:/node_modules/   //排除
      },
      //css loader
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          // devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
           MiniCssExtractPlugin.loader,//js分離css,使用style-loader不會分離
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      //圖片(主要css中) loader
      {
        test: /\.(png|jpg|gif|jpeg)/, //是匹配圖片文件后綴名稱
        use: [{
          loader: 'url-loader', //是指定使用的loader和loader的配置參數
          options: {
            limit: 500, //是把小於500B的文件打成Base64的格式，寫入JS
            outputPath: 'images/', //打包后的圖片放到images文件夾下
          }
        }]
      },
      // 引用字體圖片和svg圖片
      {
          test: /\.(eot|ttf|woff|svg)$/,
          use: 'file-loader'
      },
      // HTML中的圖片
      {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      },
     
    ]
  },
  optimization: {
    // minimize:true,//如果mode是production類型，minimize的默認值是true，執行默認壓縮，
    minimizer:[],
    splitChunks: { 
// chunks: "async",//三個個可選值：initial(初始塊)、async(按需加載塊)、all(全部塊)，默認為all;
// 值為all/initial/async/function(chunk),值為function時第一個參數為遍歷所有入口chunk時的chunk模塊，
// chunk._modules為chunk所有依賴的模塊，
// 通過chunk的名字和所有依賴模塊的resource可以自由配置,
// 會抽取所有滿足條件chunk的公有模塊，以及模塊的所有依賴模塊，包括css
// minSize: 30000,  //表示在壓縮前的最小模塊大小,默認值是30kb
// minChunks: 1,  // 表示被引用次數，默認為1；
// maxAsyncRequests: 5,  //所有異步請求不得超過5個,最大的按需(異步)加載次數.默認為1;
// maxInitialRequests: 3,  //初始話並行請求不得超過3個,最大的初始化加載次數，默認為1；
// automaticNameDelimiter:'~',//名稱分隔符，默認是~
// name: true,  //打包后的名稱，默認是chunk的名字通過分隔符（默認是～）分隔
      cacheGroups: {//設置緩存組用來抽取滿足不同規則的chunk,下面以生成common為例
        common: {
          name: 'common',  //抽取的chunk的名字
          chunks(chunk) { //同外層的參數配置，覆蓋外層的chunks，以chunk為維度進行抽取
          },
          test(module, chunks) {  //可以為字符串，正則表達式，函數，以module為維度進行抽取，
            // 只要是滿足條件的module都會被抽取到該common的chunk中，
            // 為函數時第一個參數是遍歷到的每一個模塊，第二個參數是每一個引用到該模塊的chunks數組。
            // 自己嘗試過程中發現不能提取出css，待進一步驗證。
          },
          // priority: 10,  //優先級，一個chunk很可能滿足多個緩存組，會被抽取到優先級高的緩存組中
          // minChunks: 2,  //最少被幾個chunk引用
          // reuseExistingChunk: true,//  如果該chunk中引用了已經被抽取的chunk，直接引用該chunk，不會重復打包代碼
          // enforce: true  // 如果cacheGroup中沒有設置minSize，則據此判斷是否使用上層的minSize，true：則使用0，false：使用上層minSize
        },
        fooStyles: {
          name: 'main',
          test: (m,c,entry = 'main') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        },
        barStyles: {
          name: 'main2',
          test: (m,c,entry = 'main2') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  //插件，用於生產模版和各項功能
  plugins: [
    new CleanWebpackPlugin('dist'),  // 打包前先清空
    new uglify(
      // {//js壓縮插件
      // cache: false,//啟用文件緩存
      // parallel: true,//使用多進程並行運行來提高構建速度
      // sourcMap: true//使用源映射將錯誤消息位置映射到模塊（這會減慢編譯速度）
      // }
    ),
    new MiniCssExtractPlugin({//分離js中的css
      // 類似 webpackOptions.output里面的配置 可以忽略
      //  filename，對應於entry里面生成出來的文件名
      //  chunkFilename，未被列在entry中，卻又需要被打包出來的文件命名配置，如異步加載的模塊文件
       filename: devMode ? 'css/[name].css' : '[name].[hash].css',//可以更變文件產生路徑
       chunkFilename: devMode ? 'css/[id].css' : '[id].[hash].css',
   }),
   new OptimizeCSSAssetsPlugin({//css壓縮
    // assetNameRegExp: /\.main\.css$/g,//一個正則表達式，指示應優化\最小化的文件的名稱。
    // cssProcessor: require('cssnano'),//用於優化\最小化CSS的CSS處理器，默認為cssnano
    // cssProcessorPluginOptions: {},//傳遞給cssProcessor的選項，默認為 {}
    // canPrint: true//一個布爾值，指示插件是否可以將消息打印到控制台，默認為 true
   }),
    new htmlPlugin({
      minify: { //是對html文件進行壓縮
        removeAttributeQuotes: true //removeAttrubuteQuotes是卻掉屬性的雙引號。
      },
      hash: true, //為了開發中js有緩存效果，所以加入hash，這樣可以有效避免緩存JS。
      template: './src/index.html' //是要打包的html模版路徑和文件名稱。
    }),
    new webpack.HotModuleReplacementPlugin(), // 熱更新，熱更新不是刷新
  ],
  //配置webpack開發服務功能,npm install webpack-dev-server
  devServer: {
    //設置基本結構
    contentBase: path.resolve(__dirname, '../dist'),
    host: 'localhost',//服務器IP地址,可以是localhost
    compress: true,//服務端壓縮是否開啟
    open: true,// 自動打開瀏覽器
    hot: true ,// 開啟熱更新
    port: 8888
  }
}

 

最后放上代碼文件地址　　https://github.com/TKBnice/TKBnice-webpack4.0