關於webpack項目中對於單組組分離打包的情況

91uu在線打字練習，與91小鍵人在線打字練習

居於webpack 對項目中涉及到的組件打包問題 進行總結。以webpack 4.x進行打包

對src 目錄下的components 下的組件進行打包外引 script方式引用的話。

1.  package.json 安裝打包時開發依賴 devDependencies

clean-webpack-plugin

optimize-css-assets-webpack-plugin

vue-template-compiler

@babel/core

2. 配置 .babelrc 指定兼容的瀏覽器版本

{
  // targets, useBuiltIns 等選項用於編譯出兼容目標環境的代碼
  // 其中 useBuiltIns 如果設爲 "usage"
  // Babel 會根據實際代碼中使用的 ES6/ES7 代碼，以及與你指定的 targets，按需引入對應的 polyfill
  // 而無需在代碼中直接引入 import '@babel/polyfill'，避免輸出的包過大，同時又可以放心使用各種新語法特性。
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage"
    }]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

3. 安裝webpack-cli全局  編寫webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    mode: 'production', // production|development  // https://segmentfault.com/a/1190000013712229
    entry: "./src/components/Charts/index.js",
    output: {
        path: path.resolve(__dirname, './src/components/Charts/dist'),
        publicPath: '/dist/',
        filename: 'zhc-chart.js',
        library: 'zhc-chart',
        libraryTarget: 'umd',
        // libraryExport: 'default',
        // umdNamedDefine: true,
        // globalObject: `(typeof self !== 'undefined' ? self : this)`, // https://stackoverflow.com/questions/49111086/webpack-4-universal-library-target
        // globalObject: 'typeof self !== \'undefined\' ? self : this' // element-ui 寫法
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
              test: /\.js$/, // 被 test 匹配的文件都會被 babel 編譯
              loader: 'babel-loader',
            //   include:[resolve('../../../src')]
            }, {
                test: /\.css$/,
                loader: 'css-loader'
            }, {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }]
    },
    devtool: "source-map",
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js',
            '@': resolve('src')
        },
        extensions: [ '*','.js', '.vue', '.json']
    },
    externals: {
        echarts: 'echarts',

    },
    plugins: [
        new OptimizeCssAssetsPlugin(),
        new MiniCssExtractPlugin({
            filename:'[name].css',
            compress:true
        }),
        new VueLoaderPlugin(),        
        new CleanWebpackPlugin({
            root: path.resolve(__dirname, './src/components/Charts/dist'),//root去找要刪除的文件夾
            exclude:'',//排除不刪除的目錄
            verbose: true,//控制檯打印日誌?
            dry: false//爲false是刪除文件夾的，爲true是不刪除的，默認值是false
        }),
    ],
       //優化項配置
    optimization: {
        minimize: process.env.NODE_ENV!="development",//開發時不分包優化壓縮可以調試
         // 分割代碼塊
        splitChunks: {
            cacheGroups: {   
                //vue相關框架
                vue:{
                    test: /[\\/]node_modules[\\/]vue[\\/]/,
                    name: 'vue',
                    chunks: 'initial',
                    minSize: 0, //大於0個字節
                    enforce: true, //強制生成
                    priority: 10, //權重
                    minChunks: 1 //在分割之前，這個代碼塊最小應該被引用的次數
                },
                //除Vue之外其他框架
                vendors:{
                    test:/[\\/]node_modules[\\/]?!(vue)[\\/]/,
                    name: 'vendors',
                    chunks: 'initial',
                    reuseExistingChunk: true,
                    //enforce: true, //強制生成
                    priority: 5, //權重
                    minChunks: 1 //在分割之前，這個代碼塊最小應該被引用的次數
                },
                zhcLib: {
                    name: "zhcLib",
                    test: /[\\/]node_modules[\\/]zhc-\w.+[\\/]/,
                    chunks: "all",
                    reuseExistingChunk: true,
                    minSize:0,      //代碼最小多大，進行抽離
                    minChunks:1,    //代碼復 2 次以上的抽離
                },  
            }
        }
    },

}