一、webpack的安裝

1.開啟命令視窗，全域性安裝webpack

npm install webpack -g

cnpm install webpack -g  (淘寶映象，會更快一些)

2.全域性安裝webpack-cli

npm install webpack-cli -g

cnpm install webpack-cli -g

二、webpack建立並打包專案

1.新建一個空資料夾webpackDemo，進入該資料夾，按住shift，右鍵，在此處開啟命令視窗

2.初始化

npm init

cnpm init

輸入命令後，一路回車，然後會在當前資料夾中生成一個package.json檔案

3.在當前資料夾下安裝webpack（區域性的）

cnpm install webpack --save-dev

npm install webpack --save-dev

完成後會在當前資料夾中生成一個node_modules資料夾

4.在webpackDemo資料夾下建立兩個資料夾，一個src，用於存放需要打包的原始碼，一個build，用於存放打包後的bundle.js檔案，隨便寫點內容做測試

5.在根目錄webpackDemo下建立webpack.config.js，用來配置webpack

module.exports = {
    entry: __dirname + '/src/main.js', // 用來指定入口檔案
    output: {
        path: __dirname + '/build', // 用來指定輸出檔案的存放路徑
        filename: "bundle.js" // 用來指定輸出檔案的名稱
    },
    module: {
        rules: [
            {
                test:/\.css$/, // 用於標識出應該被對應的loader進行轉換的某個或某些檔案
                loader: "style-loader!css-loader" // 標識進行轉換時應該使用哪個loader
            },
            {
                test:/\.scss$/,
                loader: "style-loader!css-loader!sass-loader"
            }
        ]
    }
};
 

6.安裝對應loader

npm install style-loader css-loader sass-loader node-sass -S

cnpm install style-loader css-loader sass-loader node-sass -S

7.打包

webpack

打包完成後，在build資料夾下會多一個bundle.js檔案，在.html檔案中引入，即可使用

注意：

    如果網速允許的情況下儘量使用npm安裝模組，cnpm可能會導致模組安裝不完全而報錯