网站里的动画是什么软件做的,怎么制作一款自己的app,58网站怎么做才有客户问,新公司起名大全上一节#xff1a;Node.js与Webpack笔记#xff08;二#xff09;-CSDN博客
从0来一遍#xff08;webpack项目#xff09; 将之前的webpack 的纯开发配置#xff0c;重新创建空白项目#xff0c;重新做一遍#xff0c;捋一遍思路防止加入生产模式时候弄混 1.创建文件夹…上一节Node.js与Webpack笔记二-CSDN博客
从0来一遍webpack项目 将之前的webpack 的纯开发配置重新创建空白项目重新做一遍捋一遍思路防止加入生产模式时候弄混 1.创建文件夹VSCode打开文件夹 2.cmd - npm init -y 3.根据需求安装一堆依赖
devDependencies: {babel/core: ^7.24.0,babel/preset-env: ^7.24.0,babel-loader: ^9.1.3,css-loader: ^6.10.0,eslint: ^8.57.0,eslint-webpack-plugin: ^4.0.1,html-webpack-plugin: ^5.6.0,less-loader: ^12.2.0,sass-loader: ^14.1.1,style-loader: ^3.3.4,stylus-loader: ^8.1.0,webpack: ^5.90.3,webpack-cli: ^5.1.4,webpack-dev-server: ^5.0.2}
使用webpack5
npm i webpack webpack-cli -D 处理css|less|sass|scss|stylus资源
npm i style-loader css-loader less-style sass-loader stylus-loader -D 处理图片资源 无不需要依赖 过去在 Webpack4 时我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了我们只需要简单配置即可处理图片资源 处理图形文字、音视频资源 无不需要依赖 Eslint检查JS、VUE、JSX语法格式
npm i eslint eslint-webpack-plugin --save-dev Babel处理兼容问题
npm install -D babel-loader babel/core babel/preset-env 处理HTML资源 以原HTML的结构自动创建HTML自动引入所有的出口js文件还有CSS等 npm i html-webpack-plugin -Dwebpack提供的小型服务器
npm i webpack-dev-server -D4.手动创建这些文件夹暂时手动 5.写(粘贴)几个配置文件
webpack.config.js 配置文件内容 1.修改打包入口和出口路径 2.打包自动清空资源 3.处理css、less、sass、scss、stylus样式资源 4.处理文字图标、音视频资源 5.处理图片资源 6.Babel处理JS文件还需要单独配置文件 7.Eslint检查js语法格式还需要单独配置文件 // node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径entry: src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径// dist 为输出目录自动创建path: path.resolve(__dirname, dist),// 出口文件名dist下的filename: js/main.js,// 打包时自动清空上次打包资源clean: true,},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中use: [style-loader, css-loader],},// 处理less资源{test: /\.less$/,use: [style-loader, css-loader, less-loader],},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},// 处理stylus资源{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, public/index.html),}),],// 开发服务器配置, webpack官方提供的小型服务器devServer: {host: localhost, // 启动服务器域名port: 3030, // 启动服务器端口号open: true, // 是否自动打开浏览器},// 模式mode: development, // 选择开发模式
}
手动创建配置文件需要的文件 入口文件.jsHTML模板插件需要的模板HTML .eslintrc.js 此时eslint其实已经可以用了每次打包编译时候才开是检测一次代码格式如果需要实时检测后面会使用VSCode插件 module.exports {// 继承Eslint官方写好的 规则还是比较主流的extends: [eslint:recommended], // 这里不能加任何空格env: {node: true, // 启用node中的全局变量五大核心那些东西browser: true, // 启用浏览器中全员变量 (windowconsole那些东西)},parserOptions: {ecmaVersion: 6, // ES语法版本支持ES6sourceType: module, // ES 模块化},rules: {no-var: 2, //不能使用var定义变量}
}
babel.config.js 此时webpack有了babel插件的帮助已经可以处理ES6语法了类似于将箭头函数转换成function(){}; module.exports {// babel/preset-env: 一个智能预设允许您使用最新的 JavaScript。// babel/preset-react一个用来编译 React jsx 语法的预设// babel/preset-typescript一个用来编译 TypeScript 语法的预设presets: [babel/preset-env],
}
6.加一个插件
VSCode-ESLint 这个插件可以实时检测代码格式就不用编译的时候才去报错了 再给插件写一个配置文件 但是此时就会对项目所有文件默认进行 Eslint 检查了我们 dist 目录下的打包后文件就会报错。但是我们开发时候只需要检查 src 下面自己写的源代码不需要检查 dist 下面的文件。 eslintignore有可能不生效有一个办法是在.eslintrc.js中写上 网上也有其他办法但是暂时也不会用 VSCode ESLint 插件 .eslintignore 文件不生效原因[转] – 后除 (mazey.net) 7.使用git
初始化仓库 创建.gitignore文件
# 忽略 npm下载的第三方包
node_modules
# 忽略分发文件夹
dist
# 忽略VSCode配置文件
.vscode
# 忽略秘钥文件
*.pem
*cer
# 忽略日志文件
*.log
# 忽略.history历史文件夹可能是一个插件生成的
.history 生产模式介绍 生产模式是开发完成代码后我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能优化代码打包速度 之前的目录结构 现在的目录 配置文件
webpack.dev.js // node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径从项目根目录为起点这里必须加上 ./entry: ./src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径path: undefined, // 开发模式不输出// 出口文件名dist下的filename: static/js/main.js,// 打包时自动清空上次打包资源// clean: true, // 开发模式没有输出不清空},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中use: [style-loader, css-loader],},// 处理less资源{test: /\.less$/,use: [style-loader, css-loader, less-loader],},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},// 处理stylus资源{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),],// 开发服务器配置, webpack官方提供的小型服务器devServer: {host: localhost, // 启动服务器域名port: 3030, // 启动服务器端口号open: true, // 是否自动打开浏览器},// 模式mode: development, // 选择开发模式
} 运行指令
npx webpack serve --config config/webpack.dev.js webpack.prod.js // node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径entry: ./src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径// dist 为输出目录自动创建path: path.resolve(__dirname, ../dist), // 生产模式需要输出// 出口文件名dist下的filename: static/js/main.js,// 打包时自动清空上次打包资源clean: true,},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中use: [style-loader, css-loader],},// 处理less资源{test: /\.less$/,use: [style-loader, css-loader, less-loader],},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},// 处理stylus资源{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),],// 开发服务器配置, webpack官方提供的小型服务器// devServer: {// host: localhost, // 启动服务器域名// port: 3030, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },// 模式mode: production, // 选择开发模式
} 运行指令
npx webpack serve --config config/webpack.prod.js 报错的点 在entry处必须加上 ./在我的印象里./src 和 src没区别啊但是这里必须加上 ./ eslint配置文件中继承官方规则这里不能加任何空格比如【eslint: recommended】 配置快速运行指令 在script中: start: npm run dev,dev: npx webpack serve --config ./config/webpack.dev.js,build: npx webpack --config ./config/webpack.prod.js npm start npm run dev npx webpack serve 以后启动指令 开发模式npm start 或 npm run dev生产模式npm run build CSS处理还需要额外依赖
1.提取成独立的css文件
安装依赖
npm i mini-css-extract-plugin -D Css 文件目前被打包到 js 文件中当 js 文件加载时会创建一个 style 标签来生成样式 这样对于网站来说会出现闪屏现象用户体验不好 我们应该是单独的 Css 文件通过 link 标签加载性能才好 webpack.prod.js
// node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin require(mini-css-extract-plugin);// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径entry: ./src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径// dist 为输出目录自动创建path: path.resolve(__dirname, ../dist), // 生产模式需要输出// 出口文件名dist下的filename: static/js/main.js,// 打包时自动清空上次打包资源clean: true,},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中// use: [style-loader, css-loader],use: [MiniCssExtractPlugin.loader, css-loader],},// 处理less资源{test: /\.less$/,// use: [style-loader, css-loader, less-loader],use: [MiniCssExtractPlugin.loader, css-loader, less-loader],},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,// use: [style-loader, css-loader, sass-loader],use: [MiniCssExtractPlugin.loader, css-loader, sass-loader],},// 处理stylus资源{test: /\.styl$/,// use: [style-loader, css-loader, stylus-loader],use: [MiniCssExtractPlugin.loader, css-loader,stylus-loader],},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// 开发服务器配置, webpack官方提供的小型服务器// devServer: {// host: localhost, // 启动服务器域名// port: 3030, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },// 模式mode: production, // 选择开发模式
} 运行命令
npm run build 2.CSS兼容性处理
安装依赖
npm i postcss-loader postcss postcss-preset-env -D
webpack.prod.js // node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin require(mini-css-extract-plugin);// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径entry: ./src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径// dist 为输出目录自动创建path: path.resolve(__dirname, ../dist), // 生产模式需要输出// 出口文件名dist下的filename: static/js/main.js,// 打包时自动清空上次打包资源clean: true,},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中// use: [style-loader, css-loader],use: [MiniCssExtractPlugin.loader, {loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},css-loader],},// 处理less资源{test: /\.less$/,// use: [style-loader, css-loader, less-loader],use: [MiniCssExtractPlugin.loader, css-loader, {loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},less-loader],},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,// use: [style-loader, css-loader, sass-loader],use: [MiniCssExtractPlugin.loader, css-loader, {loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},sass-loader],},// 处理stylus资源{test: /\.styl$/,// use: [style-loader, css-loader, stylus-loader],use: [MiniCssExtractPlugin.loader, css-loader, {loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},stylus-loader],},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// 开发服务器配置, webpack官方提供的小型服务器// devServer: {// host: localhost, // 启动服务器域名// port: 3030, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },// 模式mode: production, // 选择开发模式
} 控制兼容性 我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。 以上为了测试兼容性所以设置兼容浏览器 ie8 以上。 实际开发中我们一般不考虑旧版本浏览器了所以我们可以这样设置 package.json last 2 version无论什么浏览器只支持最近的两个版本 1%支持99%的浏览器 not dead有的浏览器发展的过程中死了我也不懂什么是死了可能是不维护了就不支持了 browserslist: [last 2 version, 1%, not dead] 想要知道更多的 browserslist 配置查看browserslist官网GitHub - browserslist/browserslist: Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env 运行命令
npm run build 合并配置简便写法 // node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin require(mini-css-extract-plugin);// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);};// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径entry: ./src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径// dist 为输出目录自动创建path: path.resolve(__dirname, ../dist), // 生产模式需要输出// 出口文件名dist下的filename: static/js/main.js,// 打包时自动清空上次打包资源clean: true,},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中// use: [style-loader, css-loader],// use: [MiniCssExtractPlugin.loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// css-loader],use: getStyleLoaders(),},// 处理less资源{test: /\.less$/,// use: [style-loader, css-loader, less-loader],// use: [MiniCssExtractPlugin.loader, css-loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// less-loader],use: getStyleLoaders(less-loader),},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,// use: [style-loader, css-loader, sass-loader],// use: [MiniCssExtractPlugin.loader, css-loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// sass-loader],use: getStyleLoaders(sass-loader),},// 处理stylus资源{test: /\.styl$/,// use: [style-loader, css-loader, stylus-loader],// use: [MiniCssExtractPlugin.loader, css-loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// stylus-loader],use: getStyleLoaders(stylus-loader),},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// 开发服务器配置, webpack官方提供的小型服务器// devServer: {// host: localhost, // 启动服务器域名// port: 3030, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },// 模式mode: production, // 选择开发模式
}
运行命令
npm run build 3.CSS压缩
安装依赖
npm i css-minimizer-webpack-plugin -D webpack.prod.js
// node.js核心模块path专门处理路径
const path require(path);// 处理HTML文件
const HtmlWebpackPlugin require(html-webpack-plugin);// Eslint插件
const ESLintPlugin require(eslint-webpack-plugin);// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin require(mini-css-extract-plugin);// CSS压缩
const CssMinizerPlugin require(css-minimizer-webpack-plugin);// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);};// webpack默认支持的是CommonJS语法
module.exports {// 入口相对路径entry: ./src/main.js,// 输出output: {// __dirname获取当前项目根目录的绝对路径// dist 为输出目录自动创建path: path.resolve(__dirname, ../dist), // 生产模式需要输出// 出口文件名dist下的filename: static/js/main.js,// 打包时自动清空上次打包资源clean: true,},// loader加载器module: {// 写正则作为匹配规则rules: [// 处理css资源{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// loader在数组中的执行顺序是从右到左// style-loader将js中的css通过创建style标签的形式添加到html文件中生效// css-loader将css资源编译成commonJS的模板到js中// use: [style-loader, css-loader],// use: [MiniCssExtractPlugin.loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// css-loader],use: getStyleLoaders(),},// 处理less资源{test: /\.less$/,// use: [style-loader, css-loader, less-loader],// use: [MiniCssExtractPlugin.loader, css-loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// less-loader],use: getStyleLoaders(less-loader),},// 处理sass 和 scss资源{test: /\.s[ac]ss$/,// use: [style-loader, css-loader, sass-loader],// use: [MiniCssExtractPlugin.loader, css-loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// sass-loader],use: getStyleLoaders(sass-loader),},// 处理stylus资源{test: /\.styl$/,// use: [style-loader, css-loader, stylus-loader],// use: [MiniCssExtractPlugin.loader, css-loader, // {// loader: postcss-loader,// options: {// postcssOptions: {// plugins: [// postcss-preset-env, // 能解决大多数样式兼容性问题// ],// },// },// },// stylus-loader],use: getStyleLoaders(stylus-loader),},// 处理媒体图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,// asset提供dataUrl来处理小图片转base64编码type: asset,parser: {// 小于 10k的图片进行转字符串处理// 体积略大一点换来的是减少一次资源请求dataUrlCondition: {maxSize: 10 * 1024, },// 修改图片资源输出路径, dist下的// hash: 8命名只取生成的hash值的前8位// ext: 后缀名// query: 请求头查询字符串可选generator: {filename: static/img/[hash: 8][ext][query],},}},// 处理字体图标文件以及音视频文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: asset/resource,// 为什么是这个类型我也不知道官网上写的// 修改媒体资源输出路径dist下的generator: {filename: static/media/[hash: 8][ext][query],},},// 处理JS文件JS解析器Babel{test: /\.js$/,exclude: /node_modules/, // 排除第三方js文件loader: babel-loader,},]},// 插件plugins: [// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录一般只检查src下的文件context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以public/index.html为模板创建文件// 新html文件内容结构与源文件一致自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),// CSS压缩new CssMinizerPlugin(),],// 开发服务器配置, webpack官方提供的小型服务器// devServer: {// host: localhost, // 启动服务器域名// port: 3030, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },// 模式mode: production, // 选择开发模式
}HTML 与 js压缩 默认生产模式已经开启了html 压缩和 js 压缩 不需要额外进行配置 下一篇
