webpack

实际上，服务器和客户端没有任何区别，虽然这里没有按钮点击操作，也没有向文本文字键入的操作，但是在一个更高的层面上，

事件正在发生。一个连接被建立——事件！数据通过连接接受——-事件！数据通过连接停止——事件！

为什么我们可以直接写require（‘’） ，我们不能这么写的，我们之所以这么写，是因为webpack支持，

webpack支持的模块化的方式是amd commonjs 和es6的模块化方式所以我们可以直接写

webpack原生是只支持js文件的打包的，是不支持css文件类型的，如果要处理css文件就需要合适的loader

css-loader使得webpack可以处理css文件，style-loader通过css-loader处理完的文件，新建一个style标签插入到HTML文件中的head中生效

webpack打包命令后面追加各种参数可以得到有关打包的更加详细的信息：

–watch 可以实现每次只要改变文件保存，webpack自动执行打包命令

–progress 可以在命令行窗口看到短暂的打包的进度百分比效果

–display-reasons 可以将‘为什么要去打包每个模块的原因也打印出来’

–display-modules 可以将打包的具体的模块都显示出来

靠坑啊，webpack必须必须要全局安装一个，然后在你的项目中再安装一个，这是官方推荐的做法。

webpack在打包的过程中会生成一些它需要的内置的函数，比如说webpack_require

发现当没有安装css-loader 和style-loader的情况下试图在js文件中require一个css文件并打包的时候，并不会报错说缺少loader工具而是直接不打包css文件，就好像是打包的时候直接忽

忽略了require（‘./style.css’）这句话。而安装了css-loader和style-loader并将管道连接正确后会正确识别对css文件的引入并打包css文件

划重点，敲黑板了，webpack.config.js中写的是module.exports = {} 而不是module.export!!!

webpack.config.js是webpack默认的配置的文件名，当执行webpack命令的时候，webpack会自动去寻找并读取这个配置文件并打包，如果你的配置文件不叫webpack.confg.js而是叫webpack.dev.config.js那么执行webpack命令的时候需要用config命令来指定要读取的配置文件的名称就像这样 webpack –config webpack.dev.config.js 如此webpack就会自动的去寻找并读取webpack.dev.config.js了。

那么如果我还想向之前那样可以指定一些参数怎么办呢，这时候我们可以配置npm的脚步来做的，npm 有一个scripts属性，可以定义一段脚步，脚本内容可以是webpack的命令： webpack –config webpack.dev.config.js –progress –display-modules –colors –display-reasons

entry: 入口的配置有三种形式

1单入口字符串形式，直接写entry: ‘src/js/mian.js’ 这样就是说你的main.js中会require所有的依赖，webpack从这个入口分析所有的依赖来进行打包

2数组形式 entry: [“./entry1”，”./entry2”] 这种情况是webpack解决两个平行的，不相互依赖的文件却想打包到一起的情况

哎呦喂，厉害了厉害了，终于知道为什么要var path = require(‘path’)

在webpack1中是不需要写这个的，当是entry是上面的情况2的时候我们配置output(永远是一个对象，里面配置path 和filename)的时候可以这样写

output: {
path: ‘./dist/js’,
filename: ‘bundle.js’
}
ok在webpack1中，这样写是没有问题的，但是如果是webpack2中（现在都是2了） 打包的时候会报错说你配置的path不是一个绝对路径，他要求一个绝对路径，

你把‘./dist/js’改成’/dist/js’后打包确实不报错了，但是却不知道打包到哪里去了，找不到打包后的结果，所以正确的做法是

var path = require(‘path’)

output: {
path: path.resolve(__dirname,’./dist/js’),
filename: ‘bundle.js’
}
这样就能成功的将bundle.js打包到dist/js文件夹下了

3对象形式，entry是一个对象，这种情况下就相当于分chunk了，对象中的key代表的是chunk的name,value代表的是chunk的真实的entry，而这里的entry遵循的规则

跟上面的是一致的既可以传字符串，也可以传数组。

情况三是用于多页面应用的

当entry是情况三的时候，output中的filename不能直接写死成‘bundle.js，否则两个chunk打包会相互覆盖出来只有一个文件叫做bundle.js

正确的方式是使用占位符来区分两个chunk，占位符有三个： name—chunk的name hash: 本次打包的hash chunkhash 每个chunk各自的hash

output: {
path: path.resolve(__dirname,’./dist/js’),
filename: ‘[name]-[hash].js’
}

或者

output: {
path: path.resolve(__dirname,’./dist/js’),
filename: ‘[name]-[chunkhash].js’
}

ok 继续

我们发现当我们分多个chunk打包的时候，为了使得多个chunk之间打包出来的模块不相互覆盖，我们就需要用hash或者是chunkname来区分，这样的话我们

对于打包出来的包的名称就变成不可预知的了，就无法做到提前在HTML文件中引入打包好后的js文件了，怎么办呢？使用插件！HTML-webpack-plugin插件就是专门

为了解决这个痛点而生的，首先我们安装插件npm install html-webpack-plugin注意别写错了哦，

之后在我们的webpack.config.js中引入插件

var htmlWebpackPlugin = require(‘html-webpack-plugin’)

在entry 和output配置项后面追加一个插件的配置 plugins: 它是一个数组，对的，是一个数组

plugins: [
new htmlWebpackPlugin() // 是的只需要在里面直接new你引进了的插件就可以了
]

这样插件就会自动生成一个默认名为index.html的文件并在其中自动引入打包好后的多个chunk打包出来的文件。

在这里要注意，生成的index.html文件会根据output的配置中写的生成到dist/js文件夹下，跟所以的js文件同级，但是往往我们希望这个HTML文件单独领出来

不要跟众多的js文件混杂在一起，此时我们可以这样改写我们的output的配置

output: {
path: path.resolve(__dirname,’./dist’),
filename：‘js/[name]-[chunkhash].js’
}

把js从dist的后面转移到filename前面，就可以做到将js文件都打包到js文件夹下而，HTML文件爱你单独在dist的根目录下了。 是不是很神奇

还有问题，插件生成的HTML不是我们想要的怎么办？，我们可以用自己写好的index.html做为模块，让插件安照我们的模板来生成插入好，

js文件的HTML只需要在plugin 中新建插件时候给他传参数

new htmlWebpackPlugin({
template： ‘index.html’ // 这样就能指定安照我们的模块来生成 HTML了
filename： ‘wathever.html’ // 名字也是可以自己定义的
inject： ‘head’| ‘body’ // 用来指定将生成好的js插入到HTML哪里
})

我靠厉害了，原来这个插件这么吊，可以利用类似模板引擎的技术在自己写的HTML模板文件中，写<%= %>这种代码来拿到在webpack.config.js 中html-webpack-plugin

插件中配置的项目，进而在生成的HTML中也就会有配置的项目了，比如说在html-webpack-plugin中配置HTML页面的title 为‘你好’ ，那么可以在自己写的HTML文件中

<%= htmlWebpackPlugin.options.title%> 这样来拿到你配置好的名字，然后这样，打包生成好的dist文件夹下的HTML文件中的title也是一致的

html-webpack-plugin 这个插件中一共有两个大key 一个是files 一个是options

我们可以指定某个chunk打包出来的文件插入到HTML文件的头部还是body中，

这行代码放到head中

这行代码放到body中

如此就可以做到main chunk打包出来的js文件会插入到生成的HTML中的head中而a chunk 打包出来的文件插入到生成的HTML文件的body了

不过需要注意的是，需要在配置中将inject 设置为 FALSE 是的必须显示的设置为FALSE 而不能只是简单的省略不写，省略的话还是会默认插入的，导致重复。

更进一步： 上线地址的设置

output中的 publicPath： ‘http://cdn.com’ 就会在资源的引用前面自动加上配置好的线上地址了

既然要上线那就要把代码压缩一下吧，可以在html-webpack-plugin中配置minify 属性来对生成的HTML文件进行压缩

loader的使用，loader接受一个资源文件，处理完成返回新的资源

webpack视一切为资源，所以只需要将资源引入进来，而import 和require都是可以的 用哪个都可以

postcss autofix 处理css文件。厉害了又是一大块儿， webpack会对css文件中通过@import引入的其他的css文件同样经过css-loader和style-loader的处理，

但是不会通过postcss的处理，要使得项目的所有css文件经过统一的处理需要使用URL传参数的方式？importLoaders=1!postcss-loade的方式

如果项目中使用了less那么需要按照less以及less-loader，在写less的串联配置的时候，less-loader要写在最右边，就是说less-loader是最先处理的，之后在交给postcss之后

再是css-loader之后再是style-loader，注意的是，如果在less文件中也通过@import引入了其他的less文件，我们是不需要想css文件引入那样在URL中写import配置参数的，

也就是说less自己帮我们处理好了@import进来的规则样式，sass同理，另外，sass文件的后缀是scss 不是sass 靠，这个大坑

ejs模板 ejs-loader

图像的处理使用file-loader 对应的还有一个URL-loader，作用是当图片的体积大于某个自己设定的值的时候使用file-loader，而当图片文件体积小于某个值的时候，

采用base64编码的方式引入图片，两种方式的利弊： base64编码无疑会导致文件的体积增大，而且如果是很多重复的图片的情况下情况更糟糕，而不用base64编码的

情况，对待图片就是一个http网络请求，不过如果是很多重复的图片的情况下，可以有效的利用浏览器的缓存，提高性能的。

所以说要视情况而定用那种处理方式：如果图片较大而且多是重复的图片则不采用base64编码而用http请求的方式，如果是很多不同的体积很小的图片，则应该采用base64编码的方式。