cnpm install--save-dev html-webpack-plugin
yarn add html-webpack-plugin -D
https://webpack.docschina.org/plugins/html-webpack-plugin/
npm install--save-dev html-webpack-plugin
yarn add html-webpack-plugin -D
npm run build
开始构建
template参数是已那个文件为模板，压缩至打包文件中并命名为index.html并且自动加载入口压缩js文件（bundle.js）
执行
npm run watch
开始监听 但是不能热模块替换
热模块替换
https://webpack.docschina.org/guides/hot-module-replacement/
cnpm install webpack-dev-server --save-dev
yarn add webpack-dev-server -D
npm run hot
即可在tel.html或bundle.js更改过程中进行热刷新
mode
https://www.webpackjs.com/concepts/mode/
index.js入口文件中填写
if (process.env.NODE_ENV ==='development'){
console.log('localhost')
}else{
console.log('www.song.com')
}
webpack综合篇
配置babel
yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
依赖安装
yarn add @babel/runtime -S
-S 主要是为其在生产模式中提供一个运行坏境
npm run build 开始
浏览器查看console window
-----------------------------------------
clean-webpack-plugin安装（删除压缩文件中的废品文件）copy-webpack-plugin（打包文件以及一些附件）
https://github.com/johnagan/clean-webpack-plugin
yarn add clean-webpack-plugin copy-webpack-plugin -D
配置copy-webpack-plugin 别看官网 注意patterns---
from 打包那个文件架 / to 打包后的文件架名
配置clean-webpack-plugi
安装 optimize-css-assets-webpack-plugin & terser-webpack-plugin
yarn add optimize-css-assets-webpack-plugin terser-webpack-plugin -D
如果在头部单独使用link方式引用这个样式文件的话
yarn add mini-css-extract-plugin -D
const TerserJSPlugin =require('terser-webpack-plugin')
const MinCssExtractPlugin =require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin =require('optimize-css-assets-webpack-plugin')
optimization:{
minimizer:[
new TerserJSPlugin({}),
new OptimizeCSSAssetsPlugin({})
]
}
MinCssExtractPlugin.loader 替换 'style-loader'
new MinCssExtractPlugin({
filename:'[name].css',
chunkFilename:'[id].css',
})
npm run build
将css文件单独挑出去，前往dist文件夹中。运行index.html。观察console window 代码 中 已经将1.css引入。