官方文档
中文官网: https://www.webpackjs.com/ 文档更新稍有不及时
英文官网: https://webpack.js.org/
安装
- 项目初始化
npm init --yes
- 安装webpack
npm install --save-dev webpack
- 使用webpack 命令
默认入口为 src/index.js
默认出口为 dist/main.js
"scripts": {
"webpack": "webpack",
}
- 使用config配置文件
默认读取当前 当前目录下 webpack.config.js
可以通过 --config 属性指定读取某一个配置文件
"scripts": {
"default": "webpack"
"build": "webpack --config ./config/webpack.pro.config.js",
},
注：建议使用项目依赖安装而非全局安装，不同项目依赖的版本不相同
config配置文件使用
Mode 模式
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
module.exports = {
mode: 'production'
};
Entry 入口配置
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
- 单入口
module.exports = {
entry: './path/to/my/entry/file.js'
};
OutPut 出口配置
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
1.单出口
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
- 多入口多出口
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
Loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
解析import 样式文件
module: {
rules: [
//解析css
{
test: /\.(css)$/,
exclude: /(node_modules)/,
use: ["style-loader", "css-loader"],
// loader的使用方式从后往前
},
// 解析less
{
test: /\.(less)$/,
exclude: /(node_modules)/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true, // 样式模块化
},
},
"less-loader",
],
},
],
}
解析图片
module: {
rules: [
{
test: /\.(png|jpg|jpeg)$/,
exclude: /(node_modules)/,
type: "asset", // 根据图片的尺寸判断是移动文件 还是变成base64
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
// type: 'asset/resource', //将图片处理移动
// type: "asset/inline", // 变成base64
// use:["url-loader","file-loader"]
},
],
}
解析jsx
module: {
rules: [
// 解析react jsx
{
test: /\.(js|jsx)$/, // 要使用的文件后缀
exclude: /(node_modules|bower_components)/, // 取出某些目录不检测
use: {
loader: "babel-loader", //使用loader 解析js文件
options: {
// presets: ["@babel/preset-env", "@babel/preset-react"],
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-react-jsx"]
},
},
},
],
}
loader 特点
- loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于对 loader 传递配置。
- loader 也能够使用 options 对象进行配置。
- 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
- loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译和其他更多。
插件(plugins)
插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！
插件目的在于解决 loader 无法实现的其他事。文章来源：https://www.toymoban.com/news/detail-465850.html
html管理插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, '../dist'),
clean: true, // 打包之前将原先的dist文件删除
},
mode: "production",
// 插件
plugins: [
new HtmlWebpackPlugin({
title: "管理输出",
template: "./public/index.html",
filename: "index.html",
inject: "body",
}),
],
}
本地服务器配置
开发阶段通过本地服务器实现代理等一些列功能文章来源地址https://www.toymoban.com/news/detail-465850.html
- 安装
npm install webpack-dev-server -D
- 配置config文件
devServer: {
static: "./dist", // 本地服务器访问的目录
port: 5201, // 端口号
proxy: {}, // 代理
}
- 运行
{
"scripts": {
"dev": "webpack server --config ./config/webpack.dev.config.js",
}
}
到了这里，关于webpack搭建react开发环境的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
