重构之路：开始配置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官网，也可以在评论里提出。如果写的不好，请多担待，谢谢）