webpack教程03-webpack-配置中的重要概念

本文是webpack教程的第三篇文章，主要会介绍：

使用webpack配置文件

在之前的系列中，我们都是使用webpack命令行参数进行webpack配置，这不利于我们集中管理配置选项

我们当然可以使用配置文件:

我们这里方便起见，一般就是用webpack.config.js

首先，我们需要知道一个webpack配置事实上就是一个js对象，通过对这个对象的字段进行赋值，我们也就是配置了webpack

基本的webpack使用涉及到到的配置字段有四个

也就是前文所说的进入点，用于webpack计算依赖关系的起始文件

直接写上相对路径即可:

entry: "./js/app.js",

也就是前文所说的打包目标，用于webpack最终输出打包好的文件

这里的output是一个对象，通过不同的字段进行更加细致的配置:

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    publicPath: "/dist"
},

path字段指打包目标的文件夹，必须是绝对路径，使用了nodejs的path库进行操作
filename字段指打包目标的文件名
publicPath是webpack-dev-server启动后，打包文件的挂载路径，比如这里生成了bundle.js，挂载路径为/dist，那么就可以在localhost:8081/dist/bundle.js路径获取打包文件

module: {
    rules: [
        {
            test: /\.css/,
            use: ["style-loader", "css-loader"]
        }
    ]
},

这是module的基本用法——“引入loader”

loader是在打包过程中对特定文件进行处理的插件

可以看到:

plugins类似于loaders，区别在于

plugins是在打包文件生成了之后进行额外处理的插件

plugins: [
    new uglifyJsPlugin(),
]

这就是一个用于minify生成文件的插件，不同的插件有不同的接入方式，可以去其官网文档查找