webpack的一些基本配置
打包命令
webpack --mode development/production
默认模式
在webpack打包时默认的位置是当前目录下的./src/index.js
通过命令
通过命令webpack --mode ./文件夹/文件 -o ./文件夹/文件夹 development
来自定义打包内容和输出,打包输出为main.js
通过配置文件配置
创建webpack.config.js
作为配置文件。
- entry:打包的入口文件
- output:打包的输出路径
- module:打包非js文件时需要引入模块
- plugins:其它的一些插件,如ESlint
- mode:打包的方法 有开发模式和生产模式
entry
- 只有一个入口时用字符串形式写路径
- 有多个入口时有两种写法
- 数组写法:把所有入口文件打包进同一个文件
- 对象写法:把入口文件按键名分别打包
- 对象加数组写法:按照上面的规则打包
打包html
使用插件
要在配置中引入插件来提供打包功能,sass或less用的是模块
下载插件:npm i html-webpack-plugin -d
使用插件:在plush中new
引入的插件,如果不写实例化时的设置,会创建空的html引入打包的js文件;实例时的参数见下面代码的注释。
打包多个html
plush数组中传入多个插件的实例来打包,通过chunk
放入打包的js名来引入。
entry: {
vue: "./src/myVue/vue.js",
test1: "./src/js/test.js",
test2: "./src/js/index.js",
test1Style: "./src/js/test1Style.js", // 用js来设置引入的css
},
output: {
filename: "[name].js", // name对应entry里的key
path: path.resolve(__dirname, "build"),
},
plugins: [
//? test1
new HtmlWebpackPlugin({
template: "./src/test1.html",
filename: "test1.html",
chunks: ["test1", "test1Style"],
minify: {
//collapseWhitespace: true, //删除空格
removeComments: true, // 删除注释
},
}),
//? test2
new HtmlWebpackPlugin({
template: "./src/test2.html",
filename: "test2.html",
chunks: ["vue", "test1"],
minify: {
//collapseWhitespace: true, //删除空格
removeComments: true, // 删除注释
},
}),
]
打包CSS
下载插件:npm i css-loader style-loader -d
使用插件:在module.rules
中放入设置
被打包的css通过requre
引入一个js文件,然后配置js文件进需要使用的html
module: {
rules: [
//! 将样式写入head里
{
test: /\.css$/, //? 匹配css文件
use: ["style-loader", "css-loader"],
// loader:"", //! 如果只引入一个
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
],
},
// test1Style.js
require("../css/style.css");
require("../css/lessStyle.less");
打包Sass Less(打包进html)
下载插件:npm i less less-loader -d
npm i node-sass sass-loader -d
使用插件:与打包css相似
打包Sass Less (打包为单独文件)
下载插件:npm i mini-css-extract-plugin -d
使用插件:与使用打包html的插件相似 需要在module中将原来的style-loader
改为插件的loader
静态方法。
module:{
rules:[
//! 将样式单独引入
{
test: /\.css$/, //? 匹配css文件
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader", "postcss-loader"],
},
]
}
Css的浏览器兼容性
下载插件:npm i postcss-loader postcss-preset-env -d
使用插件:在样式模块最后新加入postcss-loader
;新建postcss.config.js
文件配置插件,然后在package.json
中配置。
// postcss.config.js
module.exports = {
plugins: [require("postcss-preset-env")()],
};
// package.json
{"browserslist": [
"> 0.2%",
"not dead"
]}
Css的压缩
下载插件:npm i optimize-css-assets-webpack-plugin -d
使用插件:在plugin中实例化插件。
plugins:[new OptimizeCssAssetsWebpackPlugin()],
打包图片资源
插件下载:npm i url-loader file-loader -d
在html中引入图片需要npm i html-withimg-loader -d
开发服务器
插件下载:npm i webpack-dev-server -g -d
通过webpack serve
来运行
在webpack.config.js
中能通过devServer
进行配置
删除无用代码
删除js
在webpack中自带了删除无用js代码的工具,只需要在运行webpack时处于pro模式,且js代码是用ES6导入的,就可以进行删减。
删除css
插件下载:npm i purgecss-webpack-plugin -d
插件使用:在plugins
中添加插件实例
plugins:[new PurgecssPlugin({
paths:golb.sync(`${Path.src}/**/*`,{ nodir:true })
})]
原文地址:https://www.cnblogs.com/shaddollxz/p/15077008.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pointer-events:none禁用鼠标事件
- TiCDC 首个 GA 版本发布,特性与场景全揭秘
- Linux远程ssh执行命令expect使用及几种方法
- 数据结构--线性表和链表的基础知识
- Salesforce LWC学习(二十五) Jest Test
- 自建npm包-搭建,打包,调试,发布
- 你对排序算法了解多少
- 【大数据架构】大数据数据仓库与数据中台架构
- JavaScript中的内置对象、面向对象与原型
- Java.lang.Illegalaccessexception 或 java.lang.NoSuchMethodError
- Python 爬虫进阶必备 | 关于某电商 token 参数加密逻辑分析
- Python 爬虫进阶必备 | 某直播数据分析平台加密参数 sign 分析
- Python 爬虫进阶必备 | 某指数分析平台解密逻辑分析
- SpringBoot开发秘籍 - 事件异步处理
- Hive on Spark参数调优姿势小结