2-4 使用webpack的配置文件

1. 简介

webpack打包是根据配置文件来执行工作的。

2. 默认配置

之所以直接执行npx webpack index.js就能打包成功,是由于webpack内置了配置文件。 尝试直接运行npx webpack会报错,因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的,每次都写很麻烦。有没有什么办法呢?

3. 修改配置文件

webpack默认读取的用户配置文件名叫做webpack.config.js。如果根目录下有这个文件,就会默认走这个文件,否则,会启用内置的配置。

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
}

此时再运行npx webpack命令就可以正确生成打包后的文件了。 然后整理一下文件夹,将源文件放到src目录下。如图:

image.png

修改webpack.config.js如下,

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
}

再次运行命令,一样是ok的。

4. 打包命令

实际上,我们可以利用npm脚本来自动执行命令。在package.json加上如下一行:

  "scripts": {
    "build": "webpack"
  }

然后运行npm run build。scripts中不需要额外再写npx,会自动从node_modules中去找寻指定执行文件。 总结一下webpack的打包命令方式:

  1. 全局安装webpack时可以直接运行webpack
  2. 项目内安装时可以运行npx webpack
  3. 不管全局安装还是项目内安装都可以使用脚本命令,会优先从node_module中执行命令文件。 第三种无疑是最方便的,尤其是命令行包含了很多配置操作,导致命令很繁琐时。

5.作业

https://webpack.js.org/guides/getting-started

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券