安装和使用
安装到项目
yarn add webpack -D
yarn add webpack-cli -D
webpack会出现在package.json中,加入scrips
"scripts": {
"build": "webpack --mode production"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
}
然后创建一个 ./src/index.js 文件，写任意js代码。然后执行yarn build，新增一个dist目录，里面存放的就是构建好的main.js
webpack 4版本可以零配置开始构建
入口
一开始我们使用 webpack 构建时，默认的入口文件就是 ./src/index.js
常见项目中，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面对应一个构建入口
入口可以使用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'
]
}
}
最后的例子，可以理解为多个文件一个入口，webpack会解析两个文件的依赖后进行打包
loader
webpack 的 loader 用于处理不同的文件类型，可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块
loader 是 webpack 中比较复杂的一块内容，它支撑着 webpack 来处理文件的多样性
plugin
在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成.
例如：使用压缩js代码的uglifyjs-webpack-plugin插件，只需在配置中通过plugins字段，添加新的plugin即可
const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyPlugin()
],
}
输出
webpack 的输出即指 webpack 最终构建出来的静态文件，可以看看上面 webpack 官方图片右侧的那些文件。当然，构建结果的文件名、路径等都是可以配置的，使用 output 字段：
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
// 或者多个入口生成不同文件
module.exports = {
entry: {
foo: './src/foo.js',
bar: './src/bar.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist',
},
}
// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
// ...
output: {
filename: '[name].js',
path: __dirname + '/dist/[hash]',
},
}
默认创建的输出内容就是 ./dist/main.js
小结
上述涉及的几部分配置内容合到一起，就可以创建一个简单的 webpack 配置了，webpack 运行时默认读取项目下的 webpack.config.js 文件作为配置。
在项目中创建一个 webpack.config.js 文件：
const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?/,
include: [
path.resolve(__dirname, 'src')
],
use: 'babel-loader',
},
],
},
// 代码模块路径解析的配置
resolve: {
modules: [
"node_modules",
path.resolve(__dirname, 'src')
],
extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
},
plugins: [
new UglifyPlugin(),
// 使用 uglifyjs-webpack-plugin 来压缩 JS 代码
// 如果你留意了我们一开始直接使用 webpack 构建的结果，你会发现默认已经使用了 JS 代码压缩的插件
// 这其实也是我们命令中的 --mode production 的效果，后续的小节会介绍 webpack 的 mode 参数
],
}
webpack 的配置其实是一个 Node.js 的脚本，这个脚本对外暴露一个配置对象，webpack 通过这个对象来读取相关的一些配置
因为是 Node.js 脚本，所以可以使用任何的 Node.js 模块，如上述用到的 path 模块，当然第三方的模块也可以
网友评论