压缩 css js代码
标签：pack let 调试 require template ora rop put 进度
安装 mini-css-extract-plugin 抽离 css 内容
npm install mini-css-extract-plugin -D
压缩 css 代码
npm install optimize-css-assets-webpack-plugin -D
压缩js
npm install uglifyjs-webpack-plugin -D
-------------
基于 babel 实现 es6 的转换 和 eslint 语法检测
npm install babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/polyfill @babel/plugin-proposal-decorators
npm install eslint eslint-loader -D
/*
配置自定义打包规则
1 所有规则 都写在 module.exports = { } 中
*/
let path = require(‘path‘);
let HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// 抽离 css 内容
let MiniCssExtractplugin = require(‘mini-css-extract-plugin‘);
// 压缩 css 代码
let OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘);
// 压缩js
let UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin‘);
module.exports = {
// 配置 优化规则
optimization: {
// 设置压缩方式
minimizer:[
// 压缩css (产生的问题: js压缩不再执行自己默认的压缩方式,
// 也走的是这个插件，从而导致无法压缩)
new OptimizeCssAssetsWebpackPlugin(),
// 压缩 js
new UglifyjsWebpackPlugin({
cache: true, // 是否使用缓存
parallel: true, // 是否 是并发编译
sourceMap: true // 是否源码映射(方便调试)
})
]
},
// production -> 压缩模式 development
mode:‘production‘,
// 入口
entry:["@babel/polyfill","./src/index.js"],
// 出口
output:{
// 输出的目录必须是绝对路径
path: path.resolve(__dirname,‘dist‘),
// 输出的文件名 bunlid.min.[hash].js 让每一次生成的文件名都带着 hash值
filename:‘bunlid.min.[hash].js‘
},
// 服务配置
devServer: {
// 端口号
// prot: 8082,
// // 显示打包编译进度状态
// progress: true,
// // 指定当前服务处理资源的目录
contentBase: path.resolve(__dirname,‘dist‘),
// // 编译完成自动打开浏览器
// open:true,
historyApiFallback: true
},
// 使用数组
plugins:[
new HtmlWebpackPlugin({
// 自己定义的html 模板
template:‘./src/index.html‘ ,
// 输出后的文件名
// filename:‘index.[hash].html‘,
filename:‘index.html‘,
// js后面加 hash（清除缓存）
// hash: true
// 控制压缩
minify:{
// 去除空格
collapseWhitespace: true,
removeComments:true,
removeAttributeQuotes:true,
removeEmptyAttributes:true
}
}),
new MiniCssExtractplugin({
// 指定输出的文件名
filename: ‘main.min.css‘
})
],
// 使用加载器 loader 处理规则
module:{
rules:[
{
// 基于 正则匹配处理哪些文件
test:/\.(css|less)$/i,
// 控制器使用的 loader (有顺序的：从右到左编译)
use:[
// 把编译好的 css 插入到 页面的 head 中 （内嵌式）
// "style-loader",
// 把编译好的 css 插入到 页面的 head 中 (link 方式)
MiniCssExtractplugin.loader,
// 编译 @import/url() css 语法
"css-loader",
// 设置前缀
{
loader:"postcss-loader"
},
// 编译 less
{
loader:"less-loader",
options:{
importLoaders:1
}
}
]
},
{
test:/\.js$/i,
// 编译 js 的 loadber
use:[
{
loader:‘babel-loader‘,
options: {
// 基于 babel 的语法解包 (es6-es5)
presets:["@babel/preset-env"],
// 基于插件处理 es6/es6 中class 的特殊语法
plugins:[
["@babel/plugin-proposal-decorators",{
"legacy":true
}],
["@babel/plugin-proposal-class-properties",{
"loose":true
}],
"@babel/plugin-transform-runtime"
]
}
}
],
exclude:‘/node_modules‘,
include:path.resolve(__dirname,‘src‘)
}
]
}
}
标签：pack let 调试 require template ora rop put 进度
原文地址：https://www.cnblogs.com/eric-share/p/14537148.html