webpack 学习

webpack 学习
模块打包器

代码分割
loader
插件系统  模块热更新

webpack 安装
npm install webpack --save-dev

支持的三种模块化方式
commonjs amd es6
commonjs 方式 require('./world.js')

引用CSS之前先指定她的loader
require('style-loader!css-loader!./style.css')

css-loader 使得webpack可以处理.css的文件
style-loader 把css-loader处理完的css文件通过style标签插入到文档里面。

可以通过命令行的方式 指定
--module-bind 'css=style-loader!css-loader'

--watch 参数  （每次修改自动更新）
--reasons 参数  （打包原因）
命令行再加上--watch就可以监听文件是否改变自己打包  通过--watch可以实现文件更新之后自动打包

module-bind预加载loader

在命令行中处理配置如何处理css文件   使用--module-bind命令  ‘css=style-loader!css-loader’ (这个地方在windows下需要把单引号改成双引号，否则会报错)
style-loader: Adds some css to the DOM by adding a <style> tag

可以这么理解 将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中

Loader 可以在 require() 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用

建立webpack.config.js文件的原因是，我们直接运行webpack命令不指定任何参数时， webpack会去项目的根目录寻找webpack.config.js文件作为默认的配置去运行。

webpack --config 可以指定webpack的配置文件
配合npm的脚本可以给webpack添加参数
npm的配置文件package.json文件的script 里可以定义webpack的命令， 然后我们运行npm run webpack，这样就可以了。
例：
"webpack": "webpack --config webpack.config.js --progress --display-moudles --colors --display-reasons"  （指定config文件，看到打包的过程，打包的模块，颜色，打包的原因）

指定输出文件到指定的文件夹
const path = require('path');
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
 }

entry文件的三种形式
1. 字符  单个入口文件
2. 数组   两个平行的不相干的文件  它们会被打包为一个文件
3. 对象   {key: string}  它们会被分别打包 这时候就需要多个输出文件， 这种的使用场景是开发多页面的时候会用到 

chunkhush 可以认为是文件的版本号，或者md5值。 如果文件改动过那么打包的时候这个chunkhush值就会改变。 这样子，我们实际上线的时候就只会改动我们修改过的文件。 这个值对文件的版本号控制。  

 

转载于:https://my.oschina.net/jjjing/blog/866478