webpack基础
安装和配置webpack
-
安装 webpack: npm install webpack webpack-cli -D
-
创建一个 webpack.config.js 并进行配置
module.exports = { mode:"development" // development(开发模式),production(发布模式) } -
修改项目中的package.json文件并添加运行脚本dev
"scripts":{ "dev":"webpack" } -
运行dev命令进行项目打包: npm run dev
-
在页面中引入项目打包后自动生成的dist文件夹中的js文件
<script src="../main.js"></script>
设置webpack的入口和出口
webpack 的4.x版本中约定：
- 打包的入口文件为 src -> index.js
- 打包的输出文件为dist -> main.js
若要修改打包的入口与出口，可通过 webpack.config.js 修改配置信息：
这里引入了path模块，是为了方便路径操作
const path = require("path");
module.exports = {
mode:"development",
// 入口文件路径
entry: path.join(__dirname, "./src/xx.js"),
// 出口文件
output: {
// 路径
path:path.join(__dirname, "./dist"),
// 文件名
filename: "xx.js"
}
}
完成如上修改后，重新执行 npm run dev 后，dist文件夹会新增一个xx.js文件
设置webpack自动打包
-
安装自动打包功能的包： webpack-dev-server
npm install webpack-dev-server -D
-
修改 package.json 中的dev指令：
"scripts"：{ "dev":"webpack-dev-server" } -
运行 npm run dev 进行打包
-
输入网址：http://localhost:8080
自动打开默认预览页面
-
安装默认预览功能的包：html-webpack-plugin
npm install html-webpack-plugin -D
-
修改 webpack.config.js 文件：
//导入包 const HtmlWebpackPlugin = require("html-webpack-plugin"); //创建对象 const htmlPlugin = new HtmlWebpackPlugin({ //设置生成预览页面的模板文件 template:"./src/index.html", //设置生成的预览页面名称 filename:"index.html" }) -
继续修改 webpack.config.js 文件，添加 plugins 信息：
module.exports = { plugins:[ htmlPlugin ] } -
更改 package.json 文件，修改dev命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"open指执行命令后自动打开页面，host指IP地址，port指端口号
webpack加载器
通过loader打包非js文件
打包处理css文件
-
安装处理css文件的loader，运行 npm i style-loader css-loader -D
-
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则：
// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.css$/， use: ['style-loader', 'css-loader']} ] }test表示匹配的文件类型，use表示对应要调用的loader
多个loader调用顺序是：从后往前
打包处理less文件
-
运行 npm i less-loader less -D
-
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则：
// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.less$/， use: ['style-loader', 'css-loader','less-loader']} ] }
打包处理scss文件
-
运行 npm i sass-loader node-sass -D
-
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则：
// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.scss$/， use: ['style-loader', 'css-loader','sass-loader']} ] }
配置postCSS自动添加css的兼容前缀
各个浏览器对css的兼容不同，所以打包时需要配置postCSS
-
运行 npm i postcss-loader autoprefixer -D
-
在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化配置：
const autoprefixer = require('autoprefixer'); module.exports = { plugins: [autoprefixer] } -
在 webpack.config.js 的module -> rules 数组中，修改css的loader规则：
module: { rules: [ { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']} ] }
打包样式表中的图片和字体文件
-
运行 npm i url-loader file-loader -D
-
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则：
module: { rules: [ { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=xxxxx' } ] }其中 ? 后是 loader 的参数项
limit 用来指定图片大小，单位是字节，小于limit大小的图片，才会被转为base64图片
打包处理js文件中的高级语法
-
安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
-
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
-
在项目根目录中，创建babel配置文件 babel.config.js 并初始化基本配置：
module.exports = { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'] } -
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则：
exclude 为排除项，表示 babel-loader 不需要处理 node_modules中的js文件
module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ] }
webpack打包发布
上线前需先通过 webpack 将应用整体进行打包，可通过 package.json 文件配置打包命令：
该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p"
}