四、webpack之命令行

webpack相关的命令行学习

webpack命令行

• css引入时，不用加载loader，则命令行需要修改 –module-bin

  如果把test.css中的文件引入修改一下，require('style-loader!css-loader!./test.css');

  改成require('./test.css');

  则，命令行执行时，需要改成：

  webpack src/test.js bulid/index.js --module-bind 'css=style-loader!css-loader'

• 热更新 –watch

  —watch用户开发模式，不用每次启动webpack。

  webpack src/test.js bulid/index.js --module-bind 'css=style-loader!css-loader' --watch

• 打包文件压缩 -p

  -p 主要用于发布模式，系统发布上线时使用，进行输出文件的压缩

  webpack src/test.js bulid/index.js --module-bind 'css=style-loader!css-loader' --p

  

• ###打包过程，中间有进度 –progress

  —progress能看到打包进度，一般进行的很快。

• 打包中的所有文件 –display-modules

  正常情况下，大部分内容会被hidden掉，用该参数可以看到详细过程，一般用于开发模式中。

  webpack src/test.js bulid/index.js --module-bind 'css=style-loader!css-loader' --display-modules

  

  ​

• 打包原因 –display-reasons

  —display-reasons用户开发模式，查看打包的详细原因

  webpack src/test.js bulid/index.js --module-bind 'css=style-loader!css-loader' --display-modules --display-reasons

  

• 指定打包文件 –config

  主要是是区分开发模式和发布模式，两种环境用于不同的配置文件。然后再package.json中将命令行加入进来，每次执行不同的文件。

  • 需要新建配置文件：webpack --config webpack.config.js
  • 解决什么？ 解决了开发和发布不同的环境的问题
  • 在哪配置呢？ package.jspn文件中的scripts项配置
  • 如何启动呢？ 其在终端执行的方式有些不同，分两种情况：
    • start命令：cnpm start
    • 其他name命令：cnpm run name

详见【demo02】