2021年10月21日

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)

webpack学习---webpack打包其他资源(字体等)

摘要：打包其他资源(比如字体等文件) 需要的loader是 file-loader module: { rules: [ //处理css { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 打包其他资源(除了html/js/css资源以外阅读全文

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

webpack---基本开发环境配置模板

摘要： /* 开发环境配置：能让代码运行运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ const { resolve } = require('path'); const HtmlWebpackPlugin = r 阅读全文

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

导航

2021年10月21日