webpack——安装及工做原理

来自慕课网https://www.imooc.com/video/1... webpack深刻与实战 视频总结。css

安装方法

  1. 创建工程目录 mkdir projectName
  2. 进入工程目录 npm init
  3. 安装:npm install webpack --save-dev

简单使用:

  1. 新建一个js文件:hello.js

    clipboard.png

  2. webpack hello.js hello.bundle.js
    打包输出说明:Asset:打包文件名称 Size:文件大小 Chunks: 打包块 Chunk Names:打包块名称
    clipboard.png

    hello.bundle.js:
    clipboard.pngwebpack

  3. 新建world.js
    clipboard.png
  4. 在hello.js中引用world.js
    clipboard.png
  5. webpack hello.js hello.bundle.js 打包
    clipboard.png

    hello.bundle.js以下:
    将模块编号为:【0】 【1】 在模块0中__webpack_require__(1)
    clipboard.pngweb

webpack命令行经常使用参数:

--module-bind css文件绑定用style-loader!css-loader 处理, 
--progress 查看打包进度
--display-modules 展现全部模块
--display-reason 展现模块打包缘由
--watch 检测文件修改后自动打包
--config webpack.dev.config.js 从新配置webpack的文件名

图片描述

相关文章
相关标签/搜索