webpack 自我提升笔记 -- 6 html和js压缩 、生产环境基本配置

策略兵法：

　　1、js压缩：生产环境下会自动压缩js代码（mode:"production"）

　　2、html压缩：配合html-webpack-plugin插件

 

奋起冲锋：html压缩

　　wepack.config.js配置

　　const { resolve } = require("path");

　　const HtmlWebpackPlugin = require("html-webpack-plugin");

　　module.exports = {

　　　　...

　　　　plugins:[

　　　　　　new HtmlWebpackPlugin({

　　　　　　　　template:"./src/index.html",

　　　　　　　　minify:{

　　　　　　　　　　collapseWhitespace : true,　　　　//移除空格/折叠空格压缩成一行

　　　　　　　　　　removeComments : true　　　　　//移除选择

　　　　　　　　}

　　　　　　})

　　　　]

　　}

 

生产环境基本配置

　　配置思路：

　　　　1、css、less等css类：

　　　　　　css配置处理（css-loader、less-loader、style-loader、less、style-loader）

　　　　　　css抽离为单独文件（mini-css-extract-plugin）

　　　　　　css兼容各浏览器（postcss-preset-env配合package.json中browserslist）

　　　　　　css压缩（optimize-css-assets-webpack-plugin）

 

　　　　2、js

　　　　　　js语法检测（eslint-loader配合package.json中eslintConfig使用）

　　　　　　js兼容（@babel/preset-env）

　　　　3、图片处理

　　　　　　兼容各种大小图片（url-loader）

　　　　　　html中的标签图片及背景图片（html-loader）

　　　　4、html

　　　　　　html压缩及处理（html-webpack-plugin）

　　　　5、其他资源

　　　　　　其他资源处理（file-loader）

目录结构

package.json　　(记得加载依赖：npm i )

 

 

 index.css

 

 

 index.html

 

 

 index.js

 

 

 index.less

 

 

 webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");　　　　　　// 打包html的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");　 //提取css为单独文件的插件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");　　//压缩css的插件
const cssExtract = [
    {
    　　loader:MiniCssExtractPlugin.loader,　　
　　　　options:{
　　　　　　publicPath:"../"　　　　　　　　　　　　　　　　　　　　　　　　//解决打包后html中背景图片路径不对的缺陷
　　　　}
    },
     "css-loader",
     {
        loader:"postcss-loader",　　　　　　　　　　　　　　　　　　　　//css兼容浏览器 配合package.json中的browserslist一起使用

      　options:{
　　　　　　ident:"postcss",
　　　　　　plugins:["postcss-preset-env"]
　　　　 }
    }    
                 
]
module.exports = {
　　entry:"./src/index.js",　　　　　　　　　　　　　　　　　　　　　　　//打包文件入口
　　output:{
　　　　filename:"built.js",　　　　　　　　　　　　　　　　　　　　　　 //打包文件命名
　　　　path:resolve(__dirname,"build")　　　　　　　　　　　　　　　　//出口文件路径
　　},
　　//loader
　　module:{
　　　　rules:[
　　　　　　{
　　　　　　　　test:/\.css$/,
　　　　　　　　use:[
　　　　　　　　　　...cssExtract

　　　　　　　　]
　　　　　　},
　　　　　　{
　　　　　　　　test:/\.less$/,
　　　　　　　　use:[
　　　　　　　　　　...cssExtract,
　　　　　　　　　　"less-loader"　　　　　　　　　　　　　　　　　　　　//less需要的依赖：less、less-loader、css-loader、style-loader
　　　　　　　　]
　　　　　　},
　　　　　　{
　　　　　　　　test:/\.js$/,
　　　　　　　　exclude:/node_module/,
　　　　　　　　loader:"eslint-loader",　　　　　　　　　　　　　　　　//js代码规范检查
　　　　　　　　options:{　　
　　　　　　　　　　fix:true　　　　　　　　　　　　　　　　　　　　　　　//开启代码自动修复
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　test:/\.js$/,
　　　　　　　　loader:"babel-loader",　　　　　　　　　　　　　　　　//js兼容
　　　　　　　　exclude:/node_module/,　　　　　　　　　　　　　　　　//排除掉node_module中文件
　　　　　　　　options:{
　　　　　　　　　　presets:[　　　　　　　　　　　　　　　　　　　　　　//预设：告诉babel-loader怎么处理js兼容
　　　　　　　　　　　　[
　　　　　　　　　　　　　　"@babel/preset-env",
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　useBuiltIns:"usage",　　　　　　　　　//使用内置插件
　　　　　　　　　　　　　　　　corejs:{ version: 3 },　　　　　　　　//core-js版本
　　　　　　　　　　　　　　　　targets:{　　　　　　　　　　　　　　　　//各浏览配置
　　　　　　　　　　　　　　　　　　chrome: 60，　　　　　　　　　　　　//60兼容及60以上版本
　　　　　　　　　　　　　　　　　　//...(自定义配置)　　
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}
　　　　　　　　　　　　]
　　　　　　　　　　]
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　test:/\.(jpg|png|gif)$/,
　　　　　　　　loader:"url-loader",
　　　　　　　　options:{
　　　　　　　　　　limit: 8 * 1024,　　　　　　　　　　　　　　　　//限制图片，不超过8Kb的图片将世界使用base64格式解析图片
　　　　　　　　　　esModule:false,　　　　　　　　　　　　
　　　　　　　　　　name:"[hash:10].[ext]",　　　　　　　　　　　 //重命名
　　　　　　　　　　outputPath:"imgs"　　　　　　　　　　　　　　　//打包后存放图片的路径
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　test:/\.html$/,
　　　　　　　　loader:"html-loader",　　　　　　　　　　　　　　//与图片配置配合使用，负责处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
　　　　　　　　options:{
　　　　　　　　　　esModule:false
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　test:/\.(html|js|css|less|png|jpg|gif)$/,　　//处理其他资源
　　　　　　　　loader:"file-loader",
　　　　　　　　options:{
　　　　　　　　　　outputPath:"media"
　　　　　　　　}
　　　　　　}
　　　　]
　　},
　　plugins:[
　　　　new HtmlWebpackPlugin({
　　　　　　template:"./src.index.html",
　　　　　　minify:{
　　　　　　　　collapseWhitespace:true,　　　　　　　　　　　　//折叠空格
　　　　　　　　removeComments:true　　　　　　　　　　　　　　　//移除注释
　　　　　　}
　　　　}),
　　　　new MiniCssExtractPlugin({
　　　　　　filename:"css/built.css"　　　　　　　　　　　　　　//css提取成单独文件的路径
　　　　}),
　　　　new OptimizeCssAssetsWebpackPlugin()　　　　　　　　 //压缩css文件
　　],
　　mode:"development",　　　　　　　　　　　　　　　　　　　　　//当前环境：开发环境 => development; 生产环境 => production
　　target:"web",　　　　　　　　　　　　　　　　　　　　　　　　 //配合devServer开发服务器使用，解决devServer失效
　　devServer:{
　　　　contentBase:resolve(__dirname,"build"),　　　　　　　//项目构建后路径
　　　　compress:true,　　　　　　　　　　　　　　　　　　　　　　//启动gzip压缩
　　　　port:8888,　　　　　　　　　　　　　　　　　　　　　　　　 //端口号（怎么样，吉利吧）
　　　　open:true　　　　　　　　　　　　　　　　　　　　　　　　　//首次执行指令，自动打开浏览器
　　}
}

纯手打，不排除某个单词拼错