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

以上文章来自:黄卉 , https://huanghui8030.github.io/webpack/command.html