这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战
谈到webpack,就应该会有这样几个问题
1. webpack是什么?
- 官网上这样写到:本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 2. 为什么需要构建工具?
- 转换es6、es7等新的js语法
- 转换jsx语法
- css前缀补全/预处理器:less、sass样式文件解析
- 压缩混淆
- 图片压缩
- 等等 3. 前端构建工具有很多,grunt和gulp以及最近流行的vite等等,为什么选择webpack?
- 社区生态丰富
- 配置灵活和插件化扩展
- 官方更新迭代速度快
既然选了webpack,那么就来简单了解下使用吧
1. webpack配置
- webpack默认配置文件为webpack.config.js,也可以通过配置 webpack --config 指定配置文件
- 环境搭建:
-
创建空目录
- mkdir my-project
- cd my-project
- npm init -y
-
安装webpack和webpack-cli
-
创建webpack.config.js文件
-
-
2. webpack组成及使用
- Entry 文件入口
entry: "./src/index.js", // 单入口位字符串
entry: { index: "./src/index.js", search: "./src/search.js", }, // 多入口为对象 键值对写入
- output 文件出口
output: {
path: path.join(__dirname, "dist"), // 输出文件夹 同级目录下的 dist目录
filename: "bundle.js", // 单入口文件 直接指定文件名
filename: "[name].js", // 多入口文件 通过占位符确保文件名称唯一
},
- loaders 加载器
module: {
rules: [
{
// 转换es6、es7等js新语法及新特性
test: /.js$/,
use: "babel-loader",
// 忽略指定目录 不做解析
exclude: /node_modules/,
},
{
// 支持.cc文件的加载和解析
test: /.css$/,
// MiniCssExtractPlugin 输出单独的.css文件
// use数组的执行顺序位从后往前
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
// 将less装换成css
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
{
// --css后置处理器
loader: "postcss-loader",
options: {
plugins: () => [
// 自动补全浏览器前缀
require("autoprefixer")({
// 兼容浏览器最近的两个版本 版本使用人数比例 ios7版本以上
browsers: ["last 2 versions", ">1%", "ios 7"],
}),
],
},
},
{
// 弹性布局 配合lib-flexible使用(动态计算根元素rem)
// html需引入 lib-flexible 并且放在前面执行
loader: "px2rem-loader",
options: {
remUnit: 75, // 1rem=75px
remPrecision: 8, // px=>rem的小数点位数
},
},
],
},
{
// 进行 图片打包
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: "url-loader",
// 小于10k时，输出base64格式
options: { limit: 10240 },
},
],
},
{
// 进行 字体打包
test: /.(woff|wof2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name]_[hash:8][ext]",
},
},
],
},
],
},
- plugin 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
// 输出单独的.css文件 同时loader模块需更改
new MiniCssExtractPlugin({
filename: "[name]_[contenthash:8].css",
//
// {
// test: /.css$/,
// use: [MiniCssExtractPlugin.loader, "css-loader"],
// 单独输出与style-loader 相违背所以改用MiniCssExtractPlugin.loader
// },
// {
// test: /.less$/,
// use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
// },
}),
// 压缩输出的css文件
new OptimizeCss({
assetNameRegExp: /\.css$/g,
cssProcessor: require("cssnano"),
}),
// 压缩输出的html文件
new HtmlWebpackPlugin({
template: path.join(__dirname, "src/search.html"),
filename: "search.html",
// 打包出的 js css文件自动注入html
inject: true,
// 所生成的html使用哪些chunk
chunks: ["search"],
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false,
},
}),
]
- model 环境配置
- 热更新
//package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.production.js",
"watch": "webpack --watch",
"dev": "webpack-dev-server --config webpack.dev.js --open"
},
//webpack.dev.js 文件
const webpack = require("webpack");
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: "./dist",
hot: true,
},
- .babel 文件配置
{
"presets": [["@babel/preset-env"], "@babel/preset-react"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
- package.json 按需安装
{
"name": "wepack01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.production.js",
"watch": "webpack --watch",
"dev": "webpack-dev-server --config webpack.dev.js --open",
"build:ssr": "webpack --config webpack.ssr.js",
"dll": "webpack --config webpack.dll.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"autoprefixer": "^9.5.1",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"cssnano": "^4.1.10",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"express": "^4.17.1",
"file-loader": "^6.2.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"glob": "^7.1.4",
"happypack": "^5.0.1",
"hard-source-webpack-plugin": "^0.13.1",
"html-webpack-externals-plugin": "^3.8.0",
"html-webpack-plugin": "^5.0.0",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"mini-css-extract-plugin": "^2.1.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss-loader": "^3.0.0",
"process": "^0.11.10",
"px2rem-loader": "^0.1.9",
"raw-loader": "^0.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"speed-measure-webpack-plugin": "^1.5.0",
"style-loader": "^3.0.0",
"terser-webpack-plugin": "^5.1.4",
"thread-loader": "^3.0.4",
"url-loader": "^4.1.1",
"webpack": "^5.1.3",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"webpack-stats-plugin": "^1.0.3"
},
"dependencies": {
"larger-number": "^1.0.0",
"lib-flexible": "^0.3.2"
}
}
- devtool 我们在下一篇进阶中揭晓!
借鉴文章就网站
