By

webpack网址

新手教程, 地址(imooc)

  • webpack命令:
// 命令初始化
npm init
// 安装webpack
npm install webpack --save-dev
// 创建一个hello的文件
touch hello.js
// 打包hello.js
webpack hello.js hello.bundle.js

1.asset: 打包生成的资源文件
2.size: 打包生成的文件大小
3.chunks: 打包后的分块
4.chunkName: 打包的分块名称
5.webpack不会处理css文件，需要相应的loader处理(css-loader[处理css文件],style-loader[处理完的css文件代码，创建一个style标签进行引入]): 一是在required的时候指定, 一是在webpack配置/命令中指定css文件处理的loader

// js中css前加loader
require('style-loader!css-loader!./style.css');
// webpack中命令指定css文件处理loader
webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader'
// 自动打包
webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader' --watch
// 打包过程
webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader' --progress
// 打包引用模块
webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader' --display-modules
// 打包原因
webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader' --display-reasons
  • 指定webpack文件
// webpack的默认文件是webpack.config.js
webpack --config webpack.dev.config.js
  • 启动命令
// 指定文件, 过程, 展示modules, 颜色, 打包原因
webpack --config webpack.config.js --progress --display-modules --colors --display-reasons
  • output相关：

[filename]: [chunkFilename]:
[publicPath]: 会追加到img静态资源路径前

code spliting

代码分割的几种方式

各种loaders

webpack2的新特性, 传送门

  • TODO  

    QS

  • 1.代码分割
  • 2.HMR(hot module replacement)
  • 3.dll优化编译速度
  • 4.更小的打包
  • 5.公共类库/业务组件模块打包分割
  • 6.babel的ployfill和runtime的区别
  • 7.manifest.json是什么
  • 8.vue-cli中icon-font的引入问题
  • 9.img无法找到问题