安裝個webpack4.x真是要了我半條老命，花了幾天時間，看了n個教程才搞定。。。

話不多說，接下來說下webpack4.x的安裝步驟，最好用cnpm命令，用npm執行的話有時會有莫名其妙的錯誤

1、開啟cmd，切換到專案根目錄，然後執行初始化命令npm init -y

2、執行cnpm i webpack -D

3、在專案根目錄手動建立src原始碼目錄和dist產品目錄，在 src 目錄下建立 index.html

4、執行cnpm i webpack webpack-cli -D

5、在根目錄下新建一個webpack.config.js檔案，配置如下內容：

module.exports={
    mode: 'production',//production  ||  development
}

6、執行webpack-v就可以看到安裝的版本號了

7、還沒完，為了實現頁面實時重新整理而不是手動重新整理，需要執行cnpm i webpack-dev-server -D，並在package.json中新增“dev”內容：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open firefox --port 3000 --hot --host 127.0.0.1"
  },
 

8、到這個時候基本完成了webpack的配置，執行npm run dev，就可以實時編譯重新整理頁面了。

9、為了實現每次實時編譯後開啟的就是index.html頁面，需要執行cnpm i html-webpack-plugin -D，並開啟webpack.config.js配置如下內容：

const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//匯入在記憶體中自動生成index頁面外掛

//建立記憶體中的index頁面
const htmlPlugin=new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
//向外暴露一個大包配置物件
module.exports={
    mode: 'production',//production  ||  development
    plugins:[
        htmlPlugin
    ]
}
 

10、完成後執行npm run dev預設開啟的就是記憶體中的index.html頁面，而不是src中的頁面了。

11、為了讓webpack能編譯css、less、scss三種檔案，需要安裝幾個loader

12、執行cnpm i style-loader css-loader -D,然後在webpack.config.js中新增如下內容

const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//匯入在記憶體中自動生成index頁面外掛

//建立記憶體中的index頁面
const htmlPlugin=new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
//向外暴露一個大包配置物件
module.exports={
    mode: 'production',//production  ||  development
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            {test: /\.css$/, use:['style-loader','css-loader']}
        ]
    }
}

13、執行cnpm i less-loader -D和cnpm i less -D,並在webpack.config.js`中新增如下內容：

const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//匯入在記憶體中自動生成index頁面外掛


//建立記憶體中的index頁面
const htmlPlugin=new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
//向外暴露一個大包配置物件
module.exports={
    mode: 'production',//production  ||  development
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            {test: /\.css$/, use:['style-loader','css-loader']},
            {test: /\.less$/, use:['style-loader','css-loader','less-loader']}
        ]
    }
}

14、終於到最後一步了，執行cnpm i sass-loader -D和cnpm i node-sass -D,在webpack.config.js`中新增如下內容：

const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//匯入在記憶體中自動生成index頁面外掛


//建立記憶體中的index頁面
const htmlPlugin=new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
//向外暴露一個大包配置物件
module.exports={
    mode: 'production',//production  ||  development
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            {test: /\.css$/, use:['style-loader','css-loader']},
            {test: /\.less$/, use:['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use:['style-loader','css-loader','sass-loader']}
        ]
    }
}

到這一步webpack總是安裝好了，希望對大家也有幫助~~