初识 webpack (一)
0 / 0 / 创建于 5年前 /
ouer1994 的个人博客
初识 webpack (一)#
中文文档: https://webpack.docschina.org/concepts/
基于 webpack 4
1. 为什么需要构建工具？#
- 转换 ES6 语法
- 转换 JSX
- CSS 前缀补全，预处理器
- 压缩混淆
- 图片压缩
- ...
2. 基础用法#
- webpack 默认使用
webpack.config.js配置文件。可以使用webpack --config xxx.js指定配置文件.
2.1 几个概念#
- bundle: 打包最终生成的文件
- chunk: 每个 chunk 是由多个 module 组成，可以通过代码分割成多个 chunk
- module: webpack 中的模块（js、css、图片等等）
3. webpack 安装#
注意：使用 webpack 之前需要安装 node.js
# 不推荐 全局安装
npm install --save-dev webpack webpack-cli
或
npm i -D webpack webpack-cli4. webpack 核心概念#
4.1 entry (指定打包入口)#
- 单入口：适合单页应用. entry 的值是 字符串.
- 多入口：适合多页应用. entry 的值是 对象.
module.exports = {
// 多页面应用
entry: {
index: './src/js/index.js',
login: './src/js/login.js'
},
...
// 单页面应用
entry: './src/js/index.js',
}4.2 output (指定打包输出)#
指定 打包的输出目录和文件名.
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
...
}4.3 loaders#
webpack 原生值支持 js 和 json 的解析。通过 loaders 去处理不支持的类型.
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
// 排除 node_modules 文件夹里的 js 文件
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},
]
}
}4.4 plugins#
插件用于 bundle 文件的优化，资源管理和环境变量注入。作用于整个构建过程.
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
]
}4.5 mode (模式)#
中文文档: https://webpack.docschina.org/concepts/mod...
mode 用来指定当前的构建环境: production development 和 none. 默认值为 production
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号