var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',// 打包後的檔案存放的地方  
        publicPath: '/dist/',
//      filename: '[name].bundle.[chunkhash:8].js'
// 此選項決定了每個輸出 bundle 的名稱。這些 bundle 將寫入到 output.path 選項指定的目錄下。
        filename: '[name].bundle.js'
 
// 打包後輸出檔案的檔名  
    },
    module: {
        loaders: [{
            test: /\.js$/,//一個匹配loaders所處理的檔案的拓展名的正則表示式
            loader: 'babel-loader',//loader的名稱
            exclude: /node_modules/,//include/exclude手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）
            query: {
                presets: ['es2015']
            }//為loaders提供額外的設定選項,解析Es6的babel-preset-es2015包
 

        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
            //感嘆號的作用在於使同一檔案能夠使用不同型別的loader。
        }, {
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.scss$/,
            loader: 'style!css!sass?sourceMap'
        }
        ]
    },
    resolve: {
        extensions: [''
 
, '.js', '.vue', '.css'],
        alias: {
            'vue$': 'vue/dist/vue.js'
         }
    },
    //HtmlWebpackPlugin會自動幫你生成一個 html 檔案，並且引用相關的 assets 檔案(如 css,  bundle.js)。
    plugins: [new HtmlWebpackPlugin({

        // title: '樂其OMS管理系統',//生成的html文件的標題。配置該項，它並不會替換指定模板檔案中的title元素的內容
        template: './index_template.html',//本地模板檔案的位置
        filename: '../index.html', 
//輸出檔案的檔名稱，預設為index.html，不配置就是該檔名；filename配置的html檔案目錄是相對於webpackConfig.output.path路徑而言的，不是相對於當前專案目錄結構的。
        showErrors: true,
        //是否將錯誤資訊輸出到html頁面中。這個很有用，在生成html檔案的過程中有錯誤資訊，輸出到頁面就能看到錯誤相關資訊便於除錯。
        inject: 'body',
// inject：向template或者templateContent中注入所有靜態資源，不同的配置值注入的位置不經相同。

// 1、true或者body：所有JavaScript資源插入到body元素的底部
// 2、head: 所有JavaScript資源插入到head元素中
// 3、false： 所有靜態資源css和JavaScript都不會注入到模板檔案中
        complile: true,
        chunks: 'all',
    })]
};

webpack 程式碼分割 - 使用 require.ensure
webpack 在編譯時，會靜態地解析程式碼中的require.ensure()，同時將模組新增到一個分開的 chunk 當中。這個新的 chunk 會被 webpack 通過 jsonp 來按需載入。

require.ensure(dependencies: String[], callback: function(require), chunkName: String)
const configTags = r => require.ensure([], () => r(require('./view/goodsManage/configTags')), 'goods')

npm install webpack --save-dev
簡單的寫法：-_-,縮寫形式
npm i webpack -D
–save：模組名將被新增到dependencies，可以簡化為引數-S。
–save-dev: 模組名將被新增到devDependencies，可以簡化為引數-D。

webpack打包

新建一個entry.js檔案，在終端進入該檔案的目錄，執行webpack entry.js bundle.js會在同目錄下生成一個bundle.js檔案

執行webpack

1. webpack #最基本的啟動webpack命令
2. webpack --display-error-details #加上後面的引數可以更好定位到問題
3. webpack --config XXX.js #使用另一份配置檔案
4. webpack -d #生成map對映檔案，告知哪些模組被最終打包到哪裡了
5. webpack -w /webpack --watch #提供watch方法，實時進行打包更新
6. webpack -p #對打包後的檔案進行壓縮
7. webpack -d #提供SourceMaps，方便除錯
8. webpack --colors #輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟
9. `webpack –profile“ #輸出效能資料，可以看到每一步的耗時
10. webpack –display-modules` #預設情況下 node_modules 下的模組會被隱藏，加上這個引數可以顯示這些被隱藏的模組