webpack篇(下)

120 阅读1分钟

修改打包模式

webpack.config.js中的mode项用来设置打包的方式,如果不设置,会默认为production。

module.exports = {
  mode:"development"
}

webpack给mode 提供了两个模式:

●  development :开发模式(代码不会压缩 混淆)
●  production:生产模式(压缩,混淆,加密....... 不可读)

在打包时指定配置文件

下面,自已创建一个webpack.dev.js的文件,用它来做配置文件。

在项目根目录下创建webpack.dev.js,内容如下:

module.exports = {
  output:{
    filename:'boundle.js'
  }
}

下面,希望使用这个配置文件中的设置来打包。

它的格式是:

npx webpack --config webpack的配置文件

运行命令:

npx webpack --config webpack.dev.js

简化打包命令

背景

当涉及多个打包配置要指定时,打包命令比比较复杂,难以记忆。

定制script

可以在package.json中添加script命令来快速启动webpack,格式如下:

"scripts": {
"自定义命令名": "要具体执行的代码",
}

示例

"scripts": {
  "dev": "webpack --config webpack.dev.js",
  "build": "webpack",
  "test": "echo "Error: no test specified" && exit 1"
}

注意:在script中不再需要添加npx。它会自动在node_modules/.bin中去找命令。

这样 ,我们就得到了两个可以执行的命令: dev, build 。

可以在根目录下的小黑窗中通过:

npm run build, npm run dev 来运行