重構之路：開始配置webpack

開始

如今開始建立項目了，安裝node什麼的一大堆我就不說了，網上不少，我這裏使用的是node版本v10.15.0，yarn的版本是v1.12.3。

初始化webpack

首先在建立的目錄下面執行 yarn init -y yarn add webpack webpack-cli -D 我這裏使用的版本是webpack4.29.0，而後在目錄下建立webpack.config.js這個文件，在根目錄下建立src文件夾public文件夾，src下建立index.js，public下建立index.html。而後在index.js裏寫個alert(1);。等下咱們來運行這個代碼。

目前的目錄結構以下

babel

接下來就是babel了，babel這個地方那但是真複雜啊，這裏說的不是難，是複雜，各個版本的babel和不少不少的js兼容babel，我在學這塊的時候那頭髮都掉一大把。我在這個項目裏用的是babel7，接下來實如今網頁上運行js。

首先執行

yarn add babel-loader @babel/core @babel/preset-env -D
複製代碼

這裏有個疑問，爲何有的babel前面有個@呢？由於這是babel7的標誌，babel6是沒有的，這裏要注意不一樣版本的babel不要混用了。

而後再執行，這樣js就能夠自動引入到html文件裏了。

yarn add html-webpack-plugin -D
複製代碼

進入到webpack.config.js裏，寫入下面代碼

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:['./src/index.js'],
    output:{
        filename:'js/bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.(js)$/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                '@babel/preset-env'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template:'./public/index.html',//模板
            filename:'index.html',//生成的html文件的名字
            minify:{
                removeAttributeQuotes:true,//刪除雙引號
                removeComments:true,//刪除註釋
                collapseWhitespace:false//壓縮代碼
            }
        })
    ]
}
複製代碼

在控制檯執行webpack命令，這個時候，控制檯可能會有報錯，這個錯誤主要是把node_modules裏的代碼也轉化了。

咱們在module下的rules裏這樣修改

rules:[
            {
                test:/\.(js)$/,
                exclude: '/node_modules/',//添加這行
                include:path.resolve(__dirname,'src'),//添加這行
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                '@babel/preset-env'
                            ]
                        }
                    }
                ]
            }
        ]
複製代碼

這樣子再執行webpack就不會報錯了。

執行webpack後發現app目錄下多出了一個dist文件夾，這個是咱們打包後的文件。打開index.html，發現打包後的js文件被自動引入了，運行index.html，成功運行代碼。

最終目錄結構以下：

結尾

如今最簡單的一個webpack配置已經作好了，固然我前面說babel複雜，固然不止如今這些，後面還須要再進行配置。

（ps：webpack裏一些太基礎的配置沒有細講了，若是有須要能夠去參考webpack官網，也能夠在評論裏提出。若是寫的很差，請多擔待，謝謝）