webpack 創建項目

• 新建文件夾，vscode打開文件夾。
• npm inint 

• 依次輸入項目相關信息：

• 創建完會生成一個package.json。

• 全局安裝webpack：npm install webpack -g
• 安裝webpack的依賴：npm install webpack --save-dev
• 安裝完成後package.json會多出webpack的版本，代表安裝成功。
• 創建一個index.js（入口文件，後面模塊配置都是基於這個路徑）,和index.html
• 創建webpack.config.js

let path = require('path');
let webpack = require('webpack');
module.exports = {
    entry: './index.js',
    output: {
        path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
        filename: "bundle.js"
    },
    module: {
        rules: [

        ]
    }
};

• 創建完成後結構如下：

• 輸入webpack打包：webpack
• 發現需要webpack cli ,輸入npm install webpack-cli -g
• 安裝完後輸入：webpack
• 運行結果：會多出一個dist文件夾，裏面包含bundle.js