WebPack

2020-03-13

webpack是一个打包工具，可以将JS，CSS， image等资源当成一个个模块进行打包。打包的好处有：

减少了页面的衍生请求次数，提高网站效率
将ES6等高级语法进行转化编译，以兼容浏览器
打包的同时将代码混淆，提高代码安全性

webpack 的核心都写在他的配置文件webpack.config.js中，具体的属性有

入口：entry: 打包的起点，一个或者多个。一般是一个js文件，从该文件寻找依赖
输出： outpur: 一个对象，包含两个属性:

path: 打包的目标文件夹；
filename: 打包后的文件名称
加载器：Loader: webpack本身只能识别js文件，如果要加载非js文件我们需要只当额外的加载器，常用的有babel转码器可以将ES6,ES7,JSX,等高级语法转化为浏览器支持的ES5。loader的配置项（写在rules[]中）有:

test: 必须项，以匹配loaders所处理文件的扩展名的正则表达式
loader: 必须项，loader的名称，一般放到use对象中
include/exclude: 可选项，手动添加必须处理或者不处理的文件夹。
query: 可选项，为loader提供额外的设置选项

插件： plugins：数组可选项，为webpack添加插件
一个完整的webpack.config.js如下

modudle.export = {
    mode: "development",
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./common",
        historyApiFallback: true,
        inline: true
    },
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/common",
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

当然最好的做法就是自己设置一个webpack打包的项目，大家可以根据下边的链接一步一步实现以下：

转载和借鉴：
作者：秉持本心
链接：https://www.jianshu.com/p/1192cfd4a012