Webpack 这些打包指令,你确定会了?

3,689 阅读2分钟

webpack打包指令

1.配置项 --config

若没有这个指令则会默认在当前目录下的webpack.config.js,如果需要以指定文件为配置项,则为webpck --config XXX文件名

2.环境参数 --env

真实项目中,我们可能需要的环境不止开发和测试两种环境,比如预发布环境等,这时候我们就需要指定环境进行运行,这时我们可以传入一个环境对象(environment)

例如:

webpack --env.platform=web
//即以prod为环境进行打包 在项目任意地方都可以获取到,process.env.platform =web,通过打包指令增加一些变量来区分一些东西

3.模式 --mode

此模式和vue-cli-service的mode不一样,这里的mode只是在webpack环境中的模式,而且值有且只有"development" 或 "production" ,我当前理解的左右包括:

1. 某些插件只在正式环境生效,例如去掉console,那么就可以根据这个变量来判断是否加入plugins

2. webpack自己内部做的一些东西,如打包时依赖加载的就是min.js就是根据这个变量来判断的

4.热更新 --watch(-w)

执行打包后,命令行不会终止,保持监听,当入口文件 entry发生改变后,会热更新输出output

webpack --watch

5.调试相关

--progress

打印出编译进度的百分比值,例如 vue-cli2.0打包时的百分比就是这么来的 例如

"dll": "webpack -p --progress --config ./webpack.dll.conf.js"//开启读条模式
--colors

开启/关闭控制台静态资源的颜色

webpack  --colors 
--debug

loader开启调试模式

webpack  --debug 

6.一些简写

-d 开发模式
webpack  -d 
//等价于
webpack --debug --devtool cheap-module-eval-source-map --output-pathinfo
-p 生产模式
webpack  -p 
//等价于
webpack --optimize-minimize --define process.env.NODE_ENV="production"

这里就用到了上文的将环境变量的NODE_ENV设置为production