[JavaScript知识库]webpack

概念

1、前端静态模块化打包器
2、把所有文件 经过 webpack 处理,生成 html,css,图片,js

打包工具

1、sea.js
2、require.js
3、gulp
4、grunt

输出—output

 entry:'./SRC/index.js',//入口
    output:{
        path:__dirname+'/dist',//目录
        filename:'main.js',//打包好的js文件名称
    },//出口

模式—mode

分为开发模式（development）和产品模式（production）

加载器—loader

作用：

处理非js文件

 module:{
        //rules---规则
        rules:[
            //当遇到.css结尾的文件使用style-loader和css-loader
            {"test":/\.css/,use:["style-loader","css-loader"]},
        ]
    },

style-loader 把css加载到style标签，css-loader 处理.css文件

插件—plugins

作用：

在webpack运行过程做打包,压缩,清理

使用：

01、安装

npm i html-webpack-plugin

02、导入

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

03、使用

plugins:[new HtmlWebpackPlugin({template:"./public/index.html"})]

html-webpack-plugin:把模板html 插件打包好的js 拷贝到 dist目录

html-webpack-plugin

把模板html 插件打包好的js 拷贝到 dist目录

clean-webpack-plugin

导入

const { CleanWebpackPlugin} = require("clean-webpack-plugin")

清理dist目录

mini-css-extract-plugin

导入

{"test":/\.css/,use:[ MiniCssExtractPlugin.loader, "css-loader"]},
new  MiniCssExtractPlugin(filename: "style-[hash:7].css"  })

把css文件抽出为单独的css文件

css-minimizer-webpack-plugin

optimization: { //优化选项
        minimizer: [// 实现优化
            new CssMinimizerWebpackPlugin(),]},

css插件优化

本地服务器—devServer

devServer:{
        host:"localhost",   //域名
        prot:"8080",
        hot:"true",     //热更新
        open:"true"    //是否自动打开浏览器
        proxy:{},      //代理
    }

package.json
"script":{
    "serve":"webpack serve"
}

路径别名

 resolve:{
        alias:{
            //指定@代表当前目录下的src目录
            "@":path.resolve(__dirname,"./src")
        }
    }

devtool:‘eval-cheap-source-map’

报错以后源文件与报错一一对应

创建vue脚手架的环境

需要的插件与loader

vue-loader 加载vue
vue-template-compiler 编译vue模板
vue-hot-reload-api vue的热更新
vue-style-loader 处理vue的css
css-loader file-loader url-loader

配置

const {VueLoaderPlugin}=require("vue-loader")
entry:'./src/main.js'
{"test":/\.vue/,use:["vue-loader"]},
new VueLoaderPlugin()

优化

splitChunks:{
      chunks:"all"
}
//分包（把导入js单独打包成一个文件）

minimizer: [
            // 实现优化
            new CssMinimizerWebpackPlugin(),
            new TerserWebpackPlugin(),
        ]
        //css压缩与js压缩

使用产品环境上线（mode:production）

运行：

npm run serve