webpack4的一些常规操作

一、现阶段webpack就是比较火的代码构建工具了，但是日常我们用到的可能就一些简单的操作，接下来我就总结一下我常用的一些东西呢！

//开发环境配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
// resolve 用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
model:'development'
//入口
entry:'',
// 输出
ouput:{
// 输出文件名
filename:'',
// 输出路径
// _dirname node.js变量，代表当前文件的绝对路径
path:resolve(_dirname," xxx")
},
devServe:{
contentBase:resolve(_dirname,"build"),
// 启动gzip压缩
compress:true,
//端口号
port:3000,
},
// loader的配置
module:{
rules:[
// 详细的loader配置,从右往左加载
{
//匹配哪些文件
test:/\.css$/,
//使用哪些loader
use:[
//创建style标签，将js中的央视资源插入，添加到head中生效
'style-loader',
//将css文件变成commonjs模块
'css-loader'
]
}，
// 处理图片资源，需要下载url-loader和file-loader,
//问题：处理不了在Html引入的图片
{
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:[
// 图片大小小于8kb，处理成base64,优点是减少请求数量，缺点是图片体积会更大
limit: 8*1024,
// 问题：因为url-loader默认使用es6模块化，而html使用的是commonjs
//解决：关闭es6模块，使用commonjs解析
esModule:false,
//给图片重命名,[ext]原扩展名
name:[hash:10].[ext],
outputPath:'media',//输出的文件夹名称
]
}，
{
test:/\.html$/},
// 处理html文件的img图片（负责引入img，从而被url-loader处理），
loader:'html-loader'
}，
// 打包其他资源（除了htm/css/js资源外的资源）
{
// 排除css/js/html资源
exclude:/\.(css|js|html)$/
loader:'file-loader'

}
]
}，
// plugins插件的配置
plugins:[
// 功能：默认创建一个空的Html,自动引入打包输出的所有资源
//需求：需要有结构的Html文件
new HtmlWebpackPlugin({
// 复制 ‘。、src/index.html’文件,并自动打包输出所有资源
template:'./src/index.html'
})

上面有使用到loader还有plugins,loader主要是用于把代码转换成浏览器能识别的代码，因为我们平常项目中用到的sass、less样式浏览器是无法直接识别，loader可以把它们转换成css，所以loader就是用来处理非javascript文件的。plugins插件主要是用于扩展webpack的功能，插件就是一个插件专门干一件事，它一般用于生产环境的打包优化和压缩。有时候我们想不打包第三方的依赖库，那么我们可以使用插件来实现呢！例如

plugins: [
		    new HtmlWebpackExternalsPlugin({
		      externals: [
		        {
		          module: 'react',		
		          entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js', 
		          global: 'React',	挂载到全局对象上的键名
		        },
		        {
		          module: 'react-dom',
		          entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
		          global: 'React-dom',
		        },
		      ],
		    }),
	  	]

上面只是讲了开发环境的配置，生产环境的配置我打算晚点再总结了，要去做饭了！拜拜！