一、Webpack简介
Webpack是一个模块打包器,它能够根据模块的依赖关系递归地构建一个依赖关系图,当中包含了应用程序需要地所有模块,最后打包成一个或多个boundle。
说明:boundle一般用来形容模块打包后生成地文件,通常我们会将文件命名为boundle.js。
Webpack地全局安装命令为:
npm install -g webpack webpack-cli
注意:不同于Webpack 3.x,Webpack-cli在Webpack 4中被分离了,所以需要同时安装两个库。
同Browserify一样,Webpack最后打包输出地静态资源在HTML中被引用。但Webpack相比Browserify又多了更多地特色,Webpack能将CSS和图片等打包到同一个包;打包前能对文件进行预编译(如Less、TypeScript和JSX等);还能配置多入口,将包拆分;还能进行“热”替换等。
二、Webpack的核心概念
1、entry(入口)
entry用于指引Webpack应该从哪个模块开始,它是构建的入口。之后Webpack会自动找出应用内其他相互依赖的内容进行打包。通过在Webpack配置文件中配置entry属性来指定入口。虽然一般项目中只指定一个入口,但实际上可以指定多个入口。
entry配置示例:
module.exports = {
entry: './src/file.js'
}
2、output(出口)
output(出口)告诉Webpack所构建的bundles在哪里输出,默认输出路径是./dist。
output配置示例:
const path = require('path');
module.exports = {
entry: './src/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
上面配置通过output.path和output.filename属性来自定义Webpack打包后bundle的路径和名称。
3、loader(转换器)
loader用于配置Webpack处理一些非JS文件,因为Webpack本身只理解JavaScript。通过loader可以实现import导入的任何类型模块(如.jsx,.css,.less等)。
loader配置示例:
const path = require('path');
module.exports = {
entry: './src/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'doundle.js'
},
module: {
rules: [
{
test: /\.less$/,
use: 'less-loader',
//use: ['less-loader','css-loader'] //当使用多个loader时相关用法。
}
]
}
};
上面配置中,loader的test属性告诉Webpack需要处理的“对象”;use属性告诉Webpack用什么去处理。当Webpack打包的时候会识别所有后缀为.less的文件,并用less-loader去转换。
4、plugins(插件)
plugins(插件)的作用主要是打包优化、压缩等,它的功能同loader一样极其强大,使用任何插件时只需要require()进来即可。
plugins配置示例:
const HtmlWebpackPlugin =require('html-webpack-plugin'); //通过NPM安装
const webpack = require('webpack'); //用于访问内置插件
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: 'less-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJSPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
在真实项目中会区分开发环境(production)和生产环境(development),两种环境可以通过mode参数来配置,如下:
module.exports = {
mode: 'production'
};