Webpack配置文件初步

在命令行中输入：

npx webpack 需要打包的文件名

这样便可以对文件进行打包，似乎并不需要所谓的配置文件。而实际上，并不是不需要配置文件，而是因为Webpack自身有一个比较完善的默认配置。

Webpack的默认配置文件名是webpack.config.js。

我们来看一个比较基础的配置写法：

const path = require('path');

module.exports = {
    entry: '需要打包的文件路径',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

文件采用CommonJS的规范，导出一个对象，entry字段指定需要打包的入口文件，而output则是打包后文件的存放位置。

有了这个文件，就可以直接使用npx webpack来进行打包了。

在这里插入图片描述

使用过create-react-app等脚手架工具的人都知道，我们是可以通过类似npm start、npm run dev这些命令来启动应用的，那么Webpack能不能有类似的命令写法呢？当然有。

在目录下的package.json内新增一个script字段，这个字段对应一个对象，而这个对象内再设置一个bundle字段（这个可以自定义），字段值设为webpack。

那么之后我们只需要输入npm run bundle便可以进行打包了。

可能大家会有一个疑问，因为实际上npm run bundle就是webpack命令，那么这样岂不是会调用全局环境中的webpack？大可不必担心，写在package.json中，npm就会自动先从当前目录下的node_module内去寻找webpack。

现在还有一个问题，就是那个Warning该怎么去掉？仔细看Warning所写之内容，实际上是在提醒我们没有为打包设置环境。换句话说，Webpack需要知道是为生产环境还是开发环境打包，这两种环境下打出的包最大的不同就是生产环境下打的包经过了压缩，而开发环境则没有。

那么我们仅需为webpack.config.js所导出的对象再增加一个mode字段即可，至于值是production还是development就要看自己的需要了。