2020-09-07

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

加载 之后会在dist生成index.html

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

package.ison进行配置 配置

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 主要是为其在生产模式中提供一个运行坏境

配置 创建一个a.js 引入a.js 并运行

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配置

optimization:{

minimizer:[

new TerserJSPlugin({}),

    new OptimizeCSSAssetsPlugin({})

]

}

替换

MinCssExtractPlugin.loader  替换 'style-loader'

New

new MinCssExtractPlugin({

filename:'[name].css',

  chunkFilename:'[id].css',

})

npm run build

将css文件单独挑出去，前往dist文件夹中。运行index.html。观察console window 代码 中 已经将1.css引入。