vue-cli4 修改webpack相關配置

用了好久的vue腳手架2。最近終於決定苦心學習一下4。處處找大神們的筆記學習、總計。閒話少說。配置貼上。

• 1.一些關於多頁面應用的配置;
• 2.關於性能優化的配置(compression-webpack-plugin, webpack-bundle-analyzer);
• 3.也有對於plugins及module的鏈式修改(mini-css-extract-plugin);

項目地址 https://github.com/getSpidd/vue-cli4-webpack

 

// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const webpack = require("webpack");
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // gzip 壓縮
const productionGzipExtensions = ['js', 'html', 'css'];
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const IS_PROD = process.env.NODE_ENV === 'production';
module.exports = {
    // 將部署應用程序的基本URL
    // 將部署應用程序的基本URL。
    // 默認狀況下，Vue CLI假設您的應用程序將部署在域的根目錄下。
    // https://www.my-app.com/。若是應用程序部署在子路徑上，則須要使用此選項指定子路徑。例如，若是您的應用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

    publicPath: process.env.NODE_ENV === 'production' ? './' : './',

    // outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist'

    outputDir: 'dist',

    assetsDir: '',

    // pages:{ type:Object,Default:undfind }
    /*
    構建多頁面模式的應用程序.每一個「頁面」都應該有一個相應的JavaScript條目文件。該值應該是一
    個對象，其中鍵是條目的名稱，而該值要麼是指定其條目、模板和文件名的對象，要麼是指定其條目
    的字符串，
    注意：請保證pages裏配置的路徑和文件名 在你的文檔目錄都存在 不然啓動服務會報錯的
    */
    pages: {
        src1: {
            // 入口文件，相對於多頁面應用的main.js，必需。
            entry: 'src/main.js',
            // 應用的模板，至關於單頁面應用的public/index.html，非必須，省略時默認與模塊名一致。
            template: 'public/index.html',
            //o 編譯後 dist目錄中輸出的文件名，非必須，省略時默認與模塊名一致。
            filename: 'index.html',
            chunks: ['src1']
        },
        src2: {
            // 入口文件，相對於多頁面應用的main.js，必需。
            entry: 'src1/main.js',
            // 應用的模板，至關於單頁面應用的public/index.html，非必須，省略時默認與模塊名一致。
            template: 'public/index1.html',
            //o 編譯後 dist目錄中輸出的文件名，非必須，省略時默認與模塊名一致。
            filename: 'index1.html',
            // 當使用 title 選項時，
            // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'src1',
            // 在這個頁面中包含的塊，默認狀況下會包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 只有entry屬性時，直接用字符串表示模塊入口，其餘默認與模塊名一致

    },

    //   lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
    lintOnSave: true,
    // productionSourceMap：{ type:Bollean,default:true } 生產源映射
    // 若是您不須要生產時的源映射，那麼將此設置爲false能夠加速生產構建
    productionSourceMap: !IS_PROD, // 生產環境的 source map
    // devServer:{type:Object} 3個屬性host,port,https
    // 它支持webPack-dev-server的全部選項

    devServer: {
        port: 8090, // 端口號
        host: '0.0.0.0', // 本地和局域網
        // host: 'localhost', // 只有本地
        https: false, // https:{type:Boolean}
        open: false, //配置自動啓動瀏覽器
        // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
    },
    configureWebpack: config => {
        if (IS_PROD) {
            // config.plugins.push(new CompressionWebpackPlugin({
            //     algorithm: 'gzip',
            //     test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),  //匹配文件名
            //     threshold: 10240, //對超過10k的數據進行壓縮
            //     minRatio: 0.8,
            //     deleteOriginalAssets: false //是否刪除原文件
            // }));
            config.externals = {
                'jquery': '$',
                'vue': 'Vue',
                'vue-router': 'VueRouter',
                'vuex':'Vuex',
            };
        }
        // 移除 prefetch 插件
        // config.plugins.delete('prefetch')

        // 將css 分離打包
        // config.plugins.push(new MiniCssExtractPlugin({
        //     // Options similar to the same options in webpackOptions.output
        //     // both options are optional
        //     filename: "[name].css",
        //     chunkFilename: "[id].css"
        // }));

        // 將插件暴露到window中
        // config.plugins.push(new webpack.ProvidePlugin({
        //     $:'jquery'
        // }));
    },
    chainWebpack: config => {
        if (IS_PROD) {
            // 打包分析
            // config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
            //         analyzerMode: 'static'
            //     }]);
            // 刪除預加載
            config.plugins.delete('preload');
            config.plugins.delete('prefetch');
            // 壓縮代碼
            config.optimization.minimize(true);
            // 分割代碼
            // config.optimization.splitChunks({
            //     chunks: 'all'
            // });

            // 公共資源提取，
            // vendors提取的是第三方公共庫(知足提取規則的node_modules裏面的且頁面引入的)，這些文件會打到dist/js/chunk-vendors.js裏面
            // 提取規則是每一個頁面都引入的纔會打到chunk-vendors.js裏面(如vue.js)
            // 控制條件是minChunks字段，因此該字段的值是當前activity/src/projects裏面的html的個數
            // common提取的應該是除了vendors提取後，剩餘的知足條件的公共靜態模塊
            // 咱們的項目不須要common，因此將common置爲{}，覆蓋默認common配置
            // config.optimization.splitChunks({
            //     cacheGroups: {
            //         vendors: {
            //             name: 'chunk-vendors',
            //             minChunks: 2,
            //             test: /node_modules/,
            //             priority: -10,
            //             chunks: 'initial'
            //         },
            //         common: {}
            //     }
            // });
        }
        // 修改loader 中關於images的設置
        // config.module
        //     .rule('images')
        //     .use('url-loader')
        //     .loader('url-loader')
        //     .tap(options => {
        //         options.limit = 9999; // 修改 不大於9999字節的圖片不打包 base64轉碼
        //         options.publicPath = 'www.baidu.com'; // 對打包後的圖片路徑加上www.baidu.com
        //         // modify the options...
        //         return options
        //     });

        // 添加loader => 解析html中的圖片。 <img src="./favicon.png"> => <img src="data:image/png;base64,AA....8=">
        //注=======  圖片路徑錯誤，會致使打包失敗。
        /*額外支持一項黑科技：
        <div>
            #include("./layout/top.html")
        </div>
        */
        // config.module
        //     .rule('html')
        //     .test(/\.(htm|html)$/i)
        //     .use('html-withimg-loader')
        //     .loader('html-withimg-loader')
        //     .end();


        // config.plugin('extract-css').use(MiniCssExtractPlugin);

        // config.module.rules.push({
        //     // 處理css
        //     test: /\.css$/,
        //     use: [{
        //         loader: MiniCssExtractPlugin.loader,
        //         options: {
        //             // you can specify a publicPath here
        //             // by default it use publicPath in webpackOptions.output
        //             publicPath: '../'
        //         }
        //     },"css-loader"]
        // })
        // config.module.rules.push({
        //     // 處理jquery
        //     test: require.resolve('jquery'),
        //     use: [{
        //         loader: 'expose-loader',
        //         options: 'jquery'
        //     }, {
        //         loader: 'expose-loader',
        //         options: '$'
        //     }, {
        //         loader: 'expose-loader',
        //         options: 'jQuery'
        //     }]
        // })

        // config
        //     .plugin('html')
        //     .tap(args => {
        //         args[0].template = '/Users/username/proj/app/templates/index.html'
        //         return args
        //     })

    },
    // externals: {   // 打包時不打包如下依賴
    //     jquery: "$"
    // },
    css: {
        // // 是否使用css分離插件 ExtractTextPlugin
        // extract: true,
        // // 開啓 CSS source maps?
        // sourceMap: false,
        // // 啓用 CSS modules for all css / pre-processor files.
        // modules: false,
        // css預設器配置項
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    // require('postcss-px2rem')({
                    //     remUnit: 37.5
                    // })
                ]
            }
        }
    },
}