一周精通Vue（四）webpack-Plugin

webpack-Plugin

• 版權plugin

plugins: [
            new webpack.BannerPlugin("author: 清水雲")
        ]           

• html-webpack-plugin

# 配置打包HTML檔案
# 安裝插件
npm install html-webpack-plugin --save-dev

# 配置plugin
    plugins: [
        new webpack.BannerPlugin("author: 清水雲"),
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]           

• uglifyjs-webpack-plugin

# 安裝插件  
npm install [email protected] --save-dev

    plugins: [
        new webpack.BannerPlugin("author: 清水雲"),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new UglifyjsWebpackPlugin()
    ]
# 配置後打包可以将打包後的js壓縮           

• webpack-dev-server

# 安裝插件 記憶體打包 頁面實時監聽重新整理 
npm install --save-dev [email protected] 

# 配置插件

     // 開發記憶體實時加載檔案服務
     devServer: {
         // 服務于那個檔案件
         contentBase: './dist',
         // 實時監聽
         inline: true,
         // 指定端口
         port: 23333,
     }
通過指令 啟動
npm run dev

    "dev": "webpack-dev-server --open"           

• webpack-merge

安裝  可以合并配置config.js檔案
npm install webpack-merge           

• 配置檔案分離與merge

  把 webpack.config.js改成三個檔案
             

// file: base.config.js

const path = require('path');

module.exports = {
    // 打包入口檔案
    entry: './src/main.js',
    // 出口檔案
    output: {
        // 出口檔案絕對路徑
        path: path.resolve(__dirname, '../dist'),
        // 打包後的檔案名字
        filename: 'bundle.js',
        // 打包時動态修改檔案加載位址
        // publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 隻負責将css檔案加載
                // style-loader 負責将樣式添加到dom中
                // 這裡配置順序需要注意 是從後向前加載的
                use: ['style-loader', 'css-loader'],
            },

            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },

                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },

                    {
                        loader: "less-loader" // compiles Less to CSS
                    }
                ]
            },

            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 當加載圖檔時  檔案大小 小于limit時 會将圖檔編譯成base64字元串形式
                            // 當加載圖檔時  檔案大小 大于limit時 需要使用file-loader子產品進行加載
                            limit: 9999,
                            // 打包後檔案的命名規則
                            // [name] 檔案打包前的名字
                            // [hash:8] 截取8位hash值
                            // [ext] 擴充名
                            name: 'img/[name].[hash:8].[ext]'
                        },

                    }
                ]
            },

            {
                test: /\.js$/,
                // exclude 轉換的時候排除的内容
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },

            {
                test: /\.vue$/,
                // vueloader
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        alias: {
            // 指定 在其他地方導入vue的時候 vue來自哪裡
            // 在node_modules/vue/dist/ 中 預設是 vue.runtime.esm.js 修改為 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

};
           

// file:dev.config.js
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

// 合并配置檔案
module.exports = WebpackMerge(baseConfig, {
    // 開發記憶體實時加載檔案服務
    devServer: {
        // 服務于那個檔案件
        contentBase: './dist',
        // 實時監聽
        inline: true,
        // 指定端口
        port: 23333,
    }
});
           

// file: prod.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

// 合并配置檔案
module.exports = WebpackMerge(baseConfig, {
    plugins: [
        new UglifyjsWebpackPlugin()
    ],
});
           

最後在package.json 中指定加載配置檔案

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },