一、vue專案目錄圖

二、npm run dev 執行圖

資料：vue-cli webpack專案npm run dev啟動過程 

三、webpack常用配置解析

1、entry（入口物件是用於 webpack 查詢開始構建 bundle 的地方）

2、output（打包後的檔案資訊）

3、devtool

選擇一種 source map 風格來增強除錯過程。不同的值會明顯影響到構建(build)和重新構建(rebuild)的速度。

devtool: '#cheap-source-map',

devtool: isProd ? 'hidden-source-map' : 'cheap-module-eval-source-map',

4、Mode(模式)

意：開發環境

development

production【預設值】

none

module.exports = {
  mode: 'development',
};

5、Resolve(配置模組如何解析)

• extensions

嘗試按順序解析這些字尾名。如果有多個檔案有相同的名字，但字尾名不同，webpack 會解析列在陣列首位的字尾的檔案 並跳過其餘的字尾。

• modules(告訴 webpack 解析模組時應該搜尋的目錄)
• alias(別名)

6、Module(這些選項決定了如何處理專案中的不同型別的模組。)

• noParse(不去解析屬性值代表的庫的依賴) 

 例：

module:{
    noParse:/jquery/,//不去解析jquery中的依賴庫
}

• rules(webpack的loader配置在此)
• Performance（配置如何展示效能提示）
• plugins（webpack外掛）

 demo:

module.exports = {
　 mode: 'development',
    entry: {
        app: ['babel-polyfill', './src/main.js']
    },
    output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 
 
'foo.bundle.js',
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'src': path.resolve(__dirname, '../src'),
        
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory',
                include: [resolve('src'), resolve('test')]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        })
    ]
   
}

 相關資料

• webpack開發和生產兩個環境的配置詳解
• webpack 教程資源收集