来源掘金小册笔记
# 一、webpack概念和基础使用
# 1.1 安装和使用
npm install webpack webpack-cli -g
# 或者
yarn global add webpack webpack-cli
# 然后就可以全局执行命令了
webpack --help
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 webpack 的基本概念
webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包
webpack 会把我们项目中使用到的多个代码模块（可以是不同文件类型），打包构建成项目运行仅需要的几个静态文件
入口
入口可以使用
entry字段来进行配置，webpack支持配置多个入口来进行构建
module.exports = {
entry: './src/index.js'
}
// 上述配置等同于
module.exports = {
entry: {
main: './src/index.js'
}
}
// 或者配置多个入口
module.exports = {
entry: {
foo: './src/page-foo.js',
bar: './src/page-bar.js',
// ...
}
}
// 使用数组来对多个文件进行打包
module.exports = {
entry: {
main: [
'./src/foo.js',
'./src/bar.js'
]
}
}...
@前端进阶之旅: 代码已经复制到剪贴板
loader
可以把
loader理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块
- 当我们需要使用不同的
loader来解析处理不同类型的文件时，我们可以在module.rules字段下来配置相关的规则，例如使用Babel来处理.js文件
module: {
// ...
rules: [
{
test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
include: [
path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
],
use: 'babel-loader', // 指定使用的 loader
},
],
}...
