重构之路：开始配置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官网，也能够在评论里提出。若是写的很差，请多担待，谢谢）