学习内容:
- 入口(entry)
- 出口(output)
- Loader
- 插件(plugin)
- 模式(mode)
ES6+新特性的语法是无法被浏览器所识别的,浏览器只能识别ES5的语法。所以ES6+需要使用一个工具,把语法转化为ES5的语法,这个工具就是Babel。Babel是基于Webpack构建工具进行配置的。
Webpack的官方概念是模块打包机。可以把浏览器识别不了的文件,如.less、.vue等转换为浏览器能识别的文件,除此还可以对文件进行合并、压缩、混淆、缓存等。还有,把开发环境的程序打包,用于生产环境。
Webpack核心概念
入口entry:
入口起点(entry point):指示webpack应用使用哪个模块来作为构建其内部依赖的开始。
module.exports = {
entry : './path/entry/file.js'
}
出口output:
output属性告诉webpack在哪里输出它所创建的bundle(包),就是输出的文件要输出到什么地方去,以及如何命名这些文件。
const path = require("path"); // 从node引入一个叫'path'的模块
module.exports = {
entry: "./path/file.js",
output: {
path: path.resolve(__dirname, "dist"), // .resolve是node的语法,取得路径,输入到这个路径的dist文件夹里,还会生成一个默认的main.js的文件
filename: "webpack.bundle.js"
}
}
Loader:
Loader让webpack能够去处理其他类型的文件,并将它们转换为有效模块。
webpack只认识.js或.json的文件,而loader能让webpack处理更多类型的文件。比如配置babel的babel-loader等等吧。
module.exports = {
entry: "./path/file.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "webpack.bundle.js"
},
module: {
rules: [
{
test: /\.txt$/,
use: "raw-loader" // 使用row-loader去处理.txt的文件
}
]
}
}
插件(plugin):
loader用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。比如打包的优化、资源的管理、注入环境变量。
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过npm安装
const webpack = require('webpack') // 通过require加载进来
module.exports = {
module: {
rules: [
{
test: /\.txt$/,
use: "raw-loader",
}
]
},
plugins: [
// 为html文件引入一些外部资源,可以把用到的大量的有相互依赖的js文件自动引入进来
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]
}
模式(mode):
通过选择development(开发环境),production(生产环境)或none之中的一个,来设置mode参数。
module.exports = {
mode : 'production' // 设置生产环境,可以让代码合并、压缩、Hash缓存等。
}