webpack常用插件说明

最近想深入了解webpack，根据视频写下的总结，本文记录一下用到的插件，以后自己构建webpack的时候可以直接拿来 yarn add

当前所有的插件都是基于webpack4的前提下进行的安装，插件具体版本会有写明。

yarn init -y

devDependencies 开发配置 -D

webpack基础安装

yarn add [email protected] [email protected] -D

构建webpack所需基础插件，这两个是互相搭配使用的，缺一不可。
node_module文件夹同级下创建 webpack.config.js 文件作为webpack的配置文件。

const path = require('path')
module.exports = {
	entry: './src/index.js',
	output:{
		filename: 'index.js',
		path: path.resolve(__dirname, './dist')
	},
	module:{[test:'',use'']}, // 模块使用
	plugins:[], // 插件
	optimizatuon:{} // 优化项
}

热更新/加载

yarn add [email protected] -D

用来启用服务。
在webpack.config.js文件内与output同级的devServer对象中进行配置

devServer:{
	port: 端口号,
	progress: 加载显示百分比,
	contentBase: 起服务的地址 // 如果文件夹中没有此目录，将会使用在虚拟内存中的目录
}

打包生成html文件

yarn add [email protected] -D

const HtmlWebpackPlugin = require('html-webpack-plugin')
 // 下文再演示插件写法时，将直接略过本行，直接进行调用，名称就是 yarn add 时插件名称的驼峰写法。
 
plugins:[new HtmlWebpackPlugin({
	template： './src/index.js', // 模版地址
	filename: 'index.html', // 文件名
	hash: true, // 是否将在html中引入文件时插入hash值，避免缓存问题
)]

css内容处理

yarn add [email protected] css-[email protected] -D

module:{
	rules:[{
		test:'/\.css$/',
		use: ['style-loader', 'css-loader']
	}]
}

添加loader时，顺序一定是从右到左，从下往上的！！

less文件处理

yarn add [email protected] [email protected] -D

处理方式和上面一致，顺序上是先编译less成css，然后将css转化至style标签形式插入到html中

module:{
	rules:[{
		test:'/\.less$/',
		use: ['style-loader', 'css-loader', 'less-loader']
	}]
}

css添加后缀

yarn add postcss-[email protected] autop[email protected] -D

这两个文件搭配使用
首先需要在 webpack.config.js 文件同级下创建 postcss.config.js 文件，用来配置postcss-loader

// postcss.config.js
module.exports = {
	plugins:[reuqire('autoprefixer')]
}

由于要在转化css前就要设置完成前缀，所以要在css-loader前使用

// webpack.config.js
module:{
	rules:[{
		test:'/\.css$/',
		use: ['style-loader', 'css-loader', 'postcss-loader']
	}]
}

抽离css以link形式嵌入html

yarn add mini-css-[email protected] -D

plugins:[new MiniCssExtractPlugin({
	filename: 'index.css', // 抽离css文件名称
})]

在module对象中rules的每个检验css,less对象中将style-loader替换成MiniCssExtractPlugin.loader，因为不再是style标签插入css了

module:{
	rules:[{
		test:'/\.css$/',
		use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
	}]
}

css文件压缩

yarn add optimize-css-assets-webpack-plugin -D

需要在优化项optimization中新增nimimizer数组，填入要进行处理的插件

  optimization: {
    minimizer: [new OptimizeCssAssetsWebpackPlugin()]
  }

但是只这样执行的话，css确实是压缩成功了，但是它的副作用导致js压缩失败了，所以需要一个新的插件来处理这种情况

yarn add uglifyjs-webpack-plugin -D

  optimization: {
    minimizer: [new OptimizeCssplugin(), new UglifyjsPlugin({
      cache: true, // 使用缓存
      parallel: true, // 并行打包
      sourceMap: true // 源码映射
    })]
  }

这样就可以正常使用了

日后不定期更新…