参考资料:https://www.webpackjs.com/concepts/
webpack是什么?
webpack主要功能是文件打包和资源处理。
文件打包:
通常项目中回引用很多的js库,在加载这些文件的时候,如果使用的是外链的方式,那么会有很多的http请求,这样会导致效率低,速度也会很慢。webpack就可以整合资源,把资源分类,打包减少http请求的数量。
资源处理:
当我们使用es6时,在部分浏览器中,目前还不支持es6,如果这时还想写es6,可以使用一些转换器,将 es6转换成浏览器能够识别的js进行处理。同理,还有其他的各类:less,sass,stylus等等资源。
四个核心概念
入口:
webpack应该使用哪个模块,来作为构建内部依赖图的开始。当作一个索引,webpakc会根据这个入口,去找出需要的模块和库。1
entry: './src/index.js'
出口:
定义打包好的文件放在哪里。1
2
3
4output: {
path: path.resolve(__dirname, 'dist'), // 定义路径
filename: 'bundle.js' // 定义名称
}
loader
webpack是基于nodejs来使用的,默认只识别js文件。所以非js的文件需要loader来处理。loader可以将所有类型的文件转换成webpack可以处理的模块。1
2
3
4
5
6
7
8module: {
rule: [
{
test: /\.txt$/, // 匹配要处理的文件
use: 'raw-loader' // 此类文件使用的loader
}
]
}
loader特性:
- loader支持链式传递,loader链中的第一个loader返回值传递给在一个loader,再最后一个 loader,返回webpack所预期的js.
- loader可以时同步,也可以时异步。
插件
插件的返回包括从打包优化和压缩,一直到重新定义环境中的变量。 插件只需使用require(),然后添加到plugins数组中即可,在plugins中使用new创建实例。1
2
3
4
5
6
7const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
模块
1 | module.exports = { |
告知webpack使用相应的模式的内置优化。
- 设置development时,process.env.NODE_ENV = development.
- 设置production时,process.env.NODE_ENV = production.