leiyanting - 博客园

webpack学习---优化--source-map将打包后代码错误提示显示/隐藏

摘要： source-map提供源代码到构建后代码映射,编译打包后的代码报错的话会提示错误具体位置,或者隐藏源代码 source-map: 一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误） [inline-|hidden-|eval-][nosources-][c 阅读全文

posted @ 2021-10-24 07:35 leiyanting 阅读(579) 评论(0) 推荐(0)

webpack学习---生产模式--生产模式基本模板

摘要：生产配置模板 /* webpack.config.js webpack的配置文件作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。 */ // resolve用来拼接绝对路径的方阅读全文

posted @ 2021-10-22 19:41 leiyanting 阅读(86) 评论(0) 推荐(0)

webpack学习---生产模式--压缩html和js文件

摘要：压缩js和html文件压缩hmtl需要npm下载 html-webpack-plugin const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.ex 阅读全文

posted @ 2021-10-22 08:59 leiyanting 阅读(54) 评论(0) 推荐(0)

webpack学习---生产模式--js兼容性处理

摘要：需要npm下载 babel-loader @babel/core @babel/preset-env core-js 或者 @babel/polyfill js兼容性处理：babel-loader @babel/core 1. 基本js兼容性处理 --> @babel/preset-env 问题：只阅读全文

posted @ 2021-10-22 07:51 leiyanting 阅读(70) 评论(0) 推荐(0)

webpack学习---生产模式--css压缩

摘要：压缩css 需要npm下载 css-minimizer-webpack-plugin const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssE 阅读全文

posted @ 2021-10-22 07:32 leiyanting 阅读(112) 评论(0) 推荐(0)

webpack学习---生产模式--js语法检查

摘要： js语法检查需要npm下载 eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import airbnb是一个知名的语法规范设置检查规则要在package.json中设置设置检查规则： "eslintConfig": { 阅读全文

posted @ 2021-10-21 20:52 leiyanting 阅读(40) 评论(0) 推荐(0)

webpack学习---生产模式--压缩css文件

摘要：压缩css 需要npm下载 optimize-css-assets-webpack-plugin 在plugins中 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin 阅读全文

posted @ 2021-10-21 20:37 leiyanting 阅读(33) 评论(0) 推荐(0)

webpack学习---生产模式--css兼容性问题

摘要： css兼容性处理需要npm下载 postcss-loader postcss-preset-env postcss需要配置loading(module) // 在package.json中写以下代码 css兼容性处理：postcss --> postcss-loader postcss-prese 阅读全文

posted @ 2021-10-21 20:30 leiyanting 阅读(92) 评论(0) 推荐(0)

webpack学习---生产模式--将css从js中提取出来,形成css文件

摘要：将css从js中提取出来,形成css文件需要npm下载 mini-css-extract-plugin 插件 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); 阅读全文

posted @ 2021-10-21 19:22 leiyanting 阅读(111) 评论(0) 推荐(0)

webpack学习---开发服务器devServer

摘要：开发服务器 devServer 需要安装 webpack-dev-server 需要使用npx webpack-dev-server 来启动服务 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html- 阅读全文

posted @ 2021-10-21 13:39 leiyanting 阅读(38) 评论(0) 推荐(0)

导航

2021年10月24日

2021年10月22日

2021年10月21日