webpack
虬川候
如果有用请赞一下,没用请留言告诉我版本和情况
展开
-
webpack-011 去除不使用的CSS JS
内容SEO 网站标题、关键字、描述 网站内容优化 对应关键字 出现次数 Robot.txt 网站地图 生成对搜索引擎友好的网站地图 外部链接 前端SEO 网站结构布局优化 扁平化结构 控制首页链接数量不要太多或者太少 中小型网站(100个以内) 扁平化的目录层次 跳转3次就能到达所需界面 导航SEO优化 ...原创 2021-06-25 13:46:52 · 445 阅读 · 0 评论 -
webpack-010 devServer边看边开发
// 1. 安装插件 npm i webpack-dev-server -D const htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { common: './src/js/common.js', }, plugins: [ new htmlWebpackPlugin({ template: './src/ind.原创 2021-06-22 13:21:10 · 69 阅读 · 0 评论 -
webpack-009 打包图片等其他文件
// 1. 安装插件 cnpm i url-loader file-loader html-loader -D const htmlWebpackPlugin = require("html-webpack-plugin"); const miniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { entry: { common: './src/js/common.js', },.原创 2021-06-22 09:56:10 · 66 阅读 · 0 评论 -
webpack-008 压缩CSS
// 1. 安装插件 cnpm i optimize-css-assets-webpack-plugin -D const htmlWebpackPlugin = require("html-webpack-plugin"); const miniCssExtractPlugin = require("mini-css-extract-plugin"); // 2. 引用插件 const optimizeCssAssetsWebpackPlugin = require("optimize-css-ass.原创 2021-06-17 12:53:08 · 41 阅读 · 0 评论 -
webpack-002 package.json文件
package.json文件是NPM的配置文件 Npm init 创建配置文件 Npm init yes 快速创建 Package.json文件详解 Name 包名 Version 包的版本号 Description 包的描述 Homepage 包的官网url Author 包的作者名字 Contributors 包的其他贡献值名字 Dependencies 依赖包列表,如果依赖包没有安装,npm会自动将依赖包安装在node_m...原创 2021-05-24 10:16:18 · 77 阅读 · 0 评论 -
webpack-007 使用postcss-loader让CSS兼容浏览器
webpack.config.js // 1.安装插件 cnpm i post-loader postcss-preset-env -D npm安装的打包后报错 const htmlWebpackPlugin = require("html-webpack-plugin"); const miniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { entry: { common原创 2021-06-17 12:33:07 · 181 阅读 · 0 评论 -
webpack-006 打包CSS
webpack.config.js const htmlWebpackPlugin = require("html-webpack-plugin"); // 1. 下载 npm i css-loader style-loader -D // css-loader: 把css资源打包到JS文件里面去(开发用,上线不用) // style-loader: 把打包好的JS放到HTML里面去(开发用,上线不用) module.exports = { entry: { // 在你需要原创 2021-06-16 11:56:10 · 105 阅读 · 0 评论 -
webpack-005 打包html
// A1. 下载插件 npm i html-webpack-plugin -D // A2. 引用插件 const htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ // A3. 使用插件 // 默认创建一个空白html用来引入打包后的js文件 new htmlWebpackPlugin({ // 指定htm.原创 2021-05-26 13:01:36 · 96 阅读 · 0 评论 -
webpack-004 打包JS
const { resolve } = require("path"); module.exports = { entry: { // 把index.js打包成index.js index: './src/js/index.js', // 把form.js和list.js打包成list.js list: ['./src/js/form.js', './src/js/list.js'] }, ...原创 2021-05-26 12:52:27 · 61 阅读 · 0 评论 -
webpack-001 介绍和安装
Webpack作用 压缩css js html,去除注释,兼容浏览器,把sass less能可扩展语言编译到浏览器识别 官网 webpack.js.org 中文文档 webpack.docschina.org 原理和概念 树结构: 在一个入口文件中引入所有资源,形成所有依赖关系树状图 模块: 各种文件, css js html 图片 less sass … Chunk: 打包过程中被操作的模块文件叫做chunk,例如异步加载一个...原创 2021-05-26 12:32:41 · 61 阅读 · 0 评论 -
webpack-003 配置文件 webpack.config.js
webpack文件,需手动创建. webpack的五个核心entry outputmodulepluginsmode介绍和用法 const { resolve } = require("path"); module.exports = { // 指定webpack以那个文件作为入口起点开始打包, // String: 单入口,只有一个入口文件时,值为字符串,打包一个chunk,输出一个bundle,默认地址如下 // entry: './src/index....原创 2021-05-26 12:26:12 · 81 阅读 · 0 评论