用webpack4從零開始構建react腳手架

使用腳手架

git clone git@github.com:xiehaitao0229/react-wepack4-xht.git
cd react-webpack4-xht

`npm run dev`  //  啟動本地`npm run build`  //  打包線上環境`npm run clean` //  清除線上環境打包出來的檔案`npm run test` //  單元測試的工具庫`npm run fix` //  修復eslint的寫法`npm run format` //  格式化程式碼`npm run precommit` //  commit 程式碼到git倉庫的檢查

webpack今年推出的4這個版本就一直關注很學習它，webpack4這個版本借鑑了parcel的零配置，打包速度變得更快，值得大家去跟進學習。

既然我們已經迎接了webpack4的到來了，那麼就一起來使用一下，即使你沒用過之前的版本，沒關係，我們重新出發，將工作中常用到的配置寫給大家來看

安裝webpack

• 需要先在專案中npm init初始化一下，生成package.json

• 建議node版本安裝到8.2以上

// webpack4中除了正常安裝webpack之外，需要再單獨安一個webpack-clinpm i webpack webpack-cli -D

webpack是基於Node的

在專案下建立一個webpack.config.js(預設，可修改)檔案來配置webpack

module.exports = {
    entry: '',               // 入口檔案
    output: {},              // 出口檔案
    module: {},              // 處理對應模組
    plugins: [],             // 對應的外掛
    devServer: {},           // 開發伺服器配置
    mode: 'development'      // 模式配置}

以上就是webpack的正常配置模組
啟動devServer需要安裝一下webpack-dev-server

npm i webpack-dev-server -D

image.png

接下來我們按照專案的結構，我們就從0開始去寫一下配置

// webpack.config.jsconst path = require('path');module.exports = {
    entry: './src/index.js',    // 入口檔案
    output: {
        filename: 'bundle.js',      // 打包後的檔名稱
        path: path.resolve('dist')  // 打包後的目錄，必須是絕對路徑
    }
}

上面就可以說是實現了最簡單的webpack配置了，那接下來就打包一下看看

image.png

配置執行檔案

工作當中我們打包編譯的時候一般都執行npm run dev這樣的命令，既然是透過npm執行的命令，我們就應該找到package.json裡的執行指令碼去配置一下命令，這裡如下圖所示

image.png

npm run build就是我們打包後的檔案，這是生產環境下，上線需要的檔案

npm run dev是我們開發環境下打包的檔案，當然由於devServer幫我們把檔案放到記憶體中了，所以並不會輸出打包後的dist資料夾

配置Html模板

檔案都打包好了，但是我們在使用的時候不能在dist目錄下去建立一個html檔案，然後去引用打包後的js吧，這不合理，實際開發中也不會這樣
我們需要實現html打包功能，可以透過一個模板實現打包出引用好路徑的html來
這就需要用到一個常用的外掛了，< html-webpack-plugin >，用之前我們來安一下它

npm i html-webpack-plugin -D

let path = require('path');// 外掛都是一個類，所以我們命名的時候儘量用大寫開頭let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/index.js',    output: {        // 新增hash可以防止檔案快取，每次都會生成4位的hash串
        filename: 'bundle.js',   
        path: path.resolve('dist')
    },    plugins: [        // 透過new一下這個類來使用外掛
        new HtmlWebpackPlugin({            // 用哪個html作為模板
            // 在src目錄下建立一個index.html頁面當做模板來用
            template: './src/index.html',            hash: true, // 會在打包好的bundle.js後面加上hash串
        })
    ]
}

透過上面的配置後，我們再npm run build打包看一下現在是個什麼樣子了

image.png

多頁面開發，怎麼配置多頁面
如果開發的時候不只一個頁面，我們需要配置多頁面，那麼需要怎麼來搞呢？不用擔心，html-webpack-plugin外掛自有辦法，我們來觀望一下

let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    // 多頁面開發，怎麼配置多頁面
    entry: {        index: './src/index.js',        login: './src/login.js'
    },    // 出口檔案  
    output: {                       
        filename: '[name].js',        path: path.resolve('dist')
    },    plugins: [        new HtmlWebpackPlugin({            template: './src/index.html',   
            filename: 'index.html',            chunks: ['index']   // 對應關係,index.js對應的是index.html
        }),        new HtmlWebpackPlugin({            template: './src/index2.html',            filename: 'login.html',            chunks: ['login']   // 對應關係,login.js對應的是login.html
        })
    ]
}

image.png

上面基本介紹完了html和js的打包配置了，webpack對css的解析需要用到loader，所以我們先提前安裝好，待會好方便使用

引用CSS檔案

需要下載一些解析css樣式的loader

npm i style-loader css-loader -D// 引入less檔案的話，也需要安裝對應的loadernpm i less less-loader -D
npm i node-sass sass-loader -D

下面我們來看一下如何配置css檔案的解析

// index.jsimport './css/style.css';   // 引入cssimport './less/style.less'; // 引入lessconsole.log('這裡是打包檔案入口-index.js');// webpack.config.jsmodule.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve('dist')
    },    module: {
        rules: [
            {
                test: /.css$/,     // 解析css
                use: ['style-loader', 'css-loader'] // 從右向左解析
                /* 
                    也可以這樣寫，這種方式方便寫一些配置引數
                    use: [
                        {loader: 'style-loader'},
                        {loader: 'css-loader'}
                    ]
                */
            }
        ]
    }
}

• 此時打包後的css檔案是以行內樣式style的標籤寫進打包後的html頁面中，如果樣式很多的話，我們更希望直接用link的方式引入進去，這時候需要把css拆分出來

• extract-text-webpack-plugin外掛它的功效就在於會將打包到js裡的css檔案進行一個拆分,單獨提取css

拆分CSS

// @next表示可以支援webpack4版本的外掛npm i extract-text-webpack-plugin@next -D

let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');// 拆分css樣式的外掛let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');module: {        rules: [
            {                test: /.less$/,     // 解析less
                use: ExtractTextWebpackPlugin.extract({                    // 將css用link的方式引入就不再需要style-loader了
                    fallback: "style-loader",                    use: ['css-loader', 'less-loader'] // 從右向左解析
                })
            },
            {                test: /.scss$/,     // 解析scss
                use: ExtractTextWebpackPlugin.extract({                    // 將css用link的方式引入就不再需要style-loader了
                    fallback: "style-loader",                    use: ['css-loader', 'sass-loader'] // 從右向左解析
                })
            },
            {                test: /.css$/,     // 解析css
                use: ExtractTextWebpackPlugin.extract({                    // 將css用link的方式引入就不再需要style-loader了
                    fallback: "style-loader",                    use: ['css-loader']
                })
            }
        ]
    },   plugins: [        new HtmlWebpackPlugin({            template: './src/index.html',
        }),        // 拆分後會把css檔案放到dist目錄下的css/style.css
        new ExtractTextWebpackPlugin('css/style.css')  
    ]

image.png

另一個外掛mini-css-extract-plugin也是可以辦到的，它可以說是為webpack4而生的，
在這裡就簡單的提一下

npm i mini-css-extract-plugin -D

let MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {    module: {        rules: [
            {                test: /.css$/,                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },    plugins: [        new MiniCssExtractPlugin({            filename: 'css/a.css'   // 指定打包後的css
        })
    ]
}

拆分成多個css

這裡要著重說一下上面兩個外掛的區別了，個人還是建議用extract-text-webpack-plugin的，畢竟從之前的版本承接下來的，雖然在安包的時候需要@next，但是還是值得信賴的

而且現在的extract-text-webpack-plugin也支援了拆分成多個css，而目前mini-css-extract-plugin還不支援此功能

// 正常寫入的lesslet styleLess = new ExtractTextWebpackPlugin('css/style.css');// resetlet resetCss = new ExtractTextWebpackPlugin('css/reset.css');module.exports = {    module: {        rules: [
            {                test: /.css$/,                use: resetCss.extract({                    fallback: "style-loader",  
                    use: 'css-loader'
                })
            },
            {                test: /.less$/,                use: styleLess.extract({                    fallback: "style-loader",                     use: ['css-loader', 'less-loader'] // 從右向左解析
                })
            }
        ]
    },    plugins: [
        styleLess,
        resetCss
    ]
}

透過這樣操作後可以打包成兩個不同的css檔案，如下圖

image.png

引用圖片

npm i file-loader url-loader -D

如果是在css檔案裡引入的如背景圖之類的圖片，就需要指定一下相對路徑

module.exports = {    module: {
        rules: [
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,    // 小於8k的圖片自動轉成base64格式，並且不會存在實體圖片
                            outputPath: 'images/'   // 圖片打包後存放的目錄
                        }
                    }
                ]
            }
        ]
    }
}

作者：神秘者007
連結：