阅读 25

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',
		        },
		      ],
		    }),
	  	]
复制代码

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

文章分类
前端
文章标签