Webpact学习笔记记录
声明:以下笔记内容均摘自Webpack+react全家桶开发谷粒后台项目 ~张天禹老师的讲课视频,仅供学习使用
这个项目比较旧,因此以下的的安装都加上了版本号,以免新版本不兼容影响学习,如果不加上版本号会有不一样的表现,也可能出错~。
一.初始化项目
1.生成package.json
npm init
2.安装webpack
yarn add webpack@^4.41.2 webpack-cli@^3.3.10
3.执行webpack体验
webpack ./src/js/index.js -o ./dist/js/index.js --mode development
$ webpack ./src/js/index.js -o ./dist/js/index.js --mode development
asset main.js 6.53 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.09 KiB
./src/js/index.js 446 bytes [built] [code generated]
./src/js/module1.js 273 bytes [built] [code generated]
./src/js/module2.js 109 bytes [built] [code generated]
./src/js/module3.js 288 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 118 ms
二、webpack的配置文件
在webpack_test下建一个webpack.config.js
/**
* 此文件是webpack的配置文件,用于指定webpack去执行哪些任务
*/
const resolve = require('path').resolve;
module.exports = {
// 指定入口文件
entry: './src/js/index.js',
// 指定输出文件
output: {
path: resolve(__dirname, 'dist'), // 输出文件的路径
filename: 'js/index.js' // 输出文件的名称
},
// 模式
mode: 'development' // development production 配置工作模式
};
直接执行命令webpack
回车进行测试,使用配置文件进行构建
三、less-loader解析less
1.安装loader
yarn add css-loader@^3.2.0 style-loader@^1.0.1 less-loader@^5.0.0 less@^3.10.3
2.配置
// 指定loader,loader是用于加载某些文件的
module: {
rules: [
// 指定loader规则
{
test: /\.less$/, // 匹配所有的less文件
use: [
// 指定使用哪些loader
'style-loader', // 用于将css代码,以style标签的形式添加到页面中
'css-loader', // 用于将css文件加载到js中
'less-loader' // 用于将less文件转为css文件
]
}
]
}
执行webpack测试
四、eslint-loader语法检查
对js基本语法错误进行提前检查
1.安装loader
yarn add eslint-loader@^4.0.2 eslint@^7.32.0
2.配置loader
webpack.config.js中加入以下
// js语法检查
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules文件夹
loader: 'eslint-loader', // 指定使用的loader
enforce: 'pre', // 指定loader的执行顺序,pre表示优先执行
options: { // 指定eslint-loader的配置
// eslint options (if necessary)
}
}
3.在package.json中加入
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"env": {
"browser": true,
"node": true
},
"globals": {
"$": "readonly"
},
"rules": {
"no-console": 0,
"eqeqeq": 2,
"no-alert": 2
},
"extends": "eslint:recommended"
}
以上配置参考了https://blog.csdn.net/qq_41040989/article/details/128924218
“eslintConfig”: {
“parserOptions”: {
“ecmaVersion”: 6, // 支持es6
“sourceType”: “module” // 使用es6模块化
},
“env”: { // 设置环境
“browser”: true, // 支持浏览器环境: 能够使用window上的全局变量
“node”: true // 支持服务器环境: 能够使用node上global的全局变量
},
“globals”: { // 声明使用的全局变量, 这样即使没有定义也不会报错了
“$”: “readonly” // $ 只读变量
},
“rules”: { // eslint检查的规则 0 忽略 1 警告 2 错误
“no-console”: 0, // 不检查console
“eqeqeq”: 2, // 用而不用=就报错
“no-alert”: 2 // 不能使用alert
},
“extends”: “eslint:recommended” // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
},
最后执行webpack
测试
五、js语法转换
1.安装loader
yarn add babel-loader@^8.0.6 @babel/core@^7.7.2 @babel/preset-env@^7.7.1
2.配置loader
// js语法转换
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules文件夹
use: {
loader: 'babel-loader', // 指定使用的loader
options: { // 指定babel-loader的配置
presets: ['@babel/preset-env']
}
}
}
六、js兼容性处理
1. 第一种方法:使用polyfill
#安装
yarn add @babel/polyfill@^7.7.0
使用: 在App.js或index.js中引用
import '@babel/polyfill'; // 引入babel-polyfill,用于兼容ie浏览器
缺点:体积太大。
2. 第二种方法:借助按需引入core-js
安装:
yarn add core-js@^3.4.1
配置loader
// js语法转换
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules文件夹
use: {
loader: 'babel-loader', // 指定使用的loader
options: { // 指定babel-loader的配置
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage', // 按需引入需要使用polyfill
corejs: { version: 3 }, // 指定core-js的版本
targets: { // 指定兼容到哪个版本的浏览器
chrome: '58',
ie: '9',
}
}
],
],
cacheDirectory: true // 开启babel缓存
}
}
}
七、url-loader解析样式中的图片
1.安装loader
yarn add file-loader@^4.2.0 url-loader@^2.2.0
2.配置loader
// 处理图片, url-loader,可以将图片转为base64处理
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader', // 指定使用的loader
options: {
limit: 1024 * 10, // 8 * 1024 = 8kb 以下的图片会被base64处理
outputPath: 'images', // 指定输出的目录
publicPath: '../dist/images', // 指定图片的公共路径
name: '[hash:5].[ext]' // 指定输出的文件名
}
}
]
}
八、打包html文件
html不再主动引入js了,由webpack自动打包引入
如需要将以下的<script src="../dist/js/index.js"></script>
取消引入,然后由插件打包进去
<head>
<meta charset="UTF-8">
<title>Webpack_test</title>
<script src="../dist/js/index.js"></script>
</head>
1.安装插件
yarn add html-webpack-plugin@^4.5.0
2.配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 配置插件
plugins: [
// 用于将指定的html文件,移动到输出目录,并且自动引入打包后的js文件
new HtmlWebpackPlugin({
template: './src/index.html' // 指定要移动的html文件
})
]
九、打包html中图片资源
url-loader和file-loader只能处理js中的图片资源,要处理件中的图片资源,需要使用html-loader。
1.安装loader
yarn add html-loader@^0.5.5
2.配置loader
// 处理html中的图片
{
test: /\.html$/,
use: [
{
loader: 'html-loader', // 指定使用的loader
options: {
esModule: false // 指定html-loader不使用es6模块化解析
}
}
]
}
3.执行webpack命令即可
十、打包其他资源
1.使用file-loader处理即可,file-loader前面已经下载过
// 使用file-loader处理字体文件和其他文件
{
test: /\.(eot|svg|ttf|woff|woff2|mp3|mp3|avi)$/,
loader: 'file-loader', // 指定使用的loader
options: {
outputPath: 'media', // 指定输出的目录
name: '[hash:5].[ext]' // 指定输出的文件名
}
}
十一、自动编译打包运行
1.安装loader
yarn add webpack-dev-server@^3.9.0
2.修改webpack配置
// 配置开发服务器
devServer: {
compress: true, // 启动gzip压缩
port: 3000, // 指定端口号
open: true, // 自动打开浏览器
}
3.package.json中修改如下
"scripts": {
"start": "webpack-dev-server",
},
十一、开启热模替换
hot: true
,package.json中增加此配置
devServer: {
compress: true, // 启动gzip压缩
port: 3000, // 指定端口号
open: true, // 自动打开浏览器
hot: true, // 开启热更新
}
入口配置修改如下
entry: ['./src/js/index.js', './src/index.html'],
十二、devtool映射技术
在webpack.config.js中加入以下配置即可
devtool: 'cheap-module-eval-source-map' // 开发环境下使用
// devtool: 'cheap-module-source-map' // 生产环境下使用
十三、清除打包文件目录
通过插件自动删除上一次的打包文件
1.安装插件
yarn add clean-webpack-plugin@^3.0.0
2.配置与引用插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 配置插件
plugins: [
// 用于清除指定目录的文件
new CleanWebpackPlugin()
],
十四、提取css成单独的文件
1.安装插件
yarn add mini-css-extract-plugin@^0.8.0
2.引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 用于将css代码提取为单独的文件
3.配置loader
{
test: /\.less$/, // 指定匹配的文件
// 指定使用的loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 用于将css文件加载到js中
'less-loader' // 用于将less文件转为css文件
]
}
十五、css文件的兼容性处理
1.安装
yarn add postcss-loader@^3.0.0 postcss-flexbugs-fixes@^4.1.0 postcss-preset-env@^6.7.0 postcss-normalize@^8.0.1
2.配置
{
loader: 'postcss-loader', // 用于给css代码自动添加兼容性前缀
options: {
postcssOptions: {
plugins: () => [
require('postcss-flexbugs-fixs'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
],
sourceMap: true
}
}
},
在src目录下增加.browserslistrc文件:
# Browsers that we support
last 1 version
> 1%
IE 10 # sorry
十六、压缩css
1.安装插件
yarn add optimize-css-assets-webpack-plugin@^5.0.3
2.引入插件
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 用于压缩css代码
3.配置插件
// 用于压缩css代码
new optimizeCssAssetsWebpackPlugin(
{
cssProcessorPluginOptions: {
presets: ['default', { discardComments: { removeAll: true } }]
},
cssProcessorOptions: {
map: {
inline: false, // 不生成内联映射,这样配置就会生成一个source-map文件
annotation: true // 如果没有源映射,就会生成一个注释
}
}
}
)
十七、压缩html
在插件HtmlWebpackPlugin
中加入以下配置即可
new HtmlWebpackPlugin({
template: './src/index.html', // 指定要移动的html文件
minify: { // 配置html压缩
removeComments: true, // 移除注释
collapseWhitespace: true, // 移除空格
removeRedundantAttributes: true, // 移除多余的属性
useShortDoctype: true, // 使用短的文档声明
removeEmptyAttributes: true, // 移除空的属性
removeStyleLinkTypeAttributes: true, // 移除style和link标签的type属性
keepClosingSlash: true, // 保留闭合斜线
minifyJS: true, // 压缩内联js代码
minifyCSS: true, // 压缩内联css代码
minifyURLs: true, // 压缩内联的url
}
})
十八、完整的package.json依赖如下
"dependencies": {
"@babel/core": "7.7.2",
"@babel/polyfill": "7.7.0",
"@babel/preset-env": "7.7.1",
"babel-loader": "8.0.6",
"clean-webpack-plugin": "^3.0.0",
"core-js": "3.4.1",
"css-loader": "3.2.0",
"eslint": "7.32.0",
"eslint-loader": "4.0.2",
"file-loader": "4.2.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "4.5.0",
"less": "3.10.3",
"less-loader": "5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"postcss-normalize": "^8.0.1",
"postcss-preset-env": "^6.7.0",
"style-loader": "1.0.1",
"url-loader": "2.2.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.9.0"
}