webpack进行开发环境的配置
/*
开发环境配置
运行项目指令:
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包,没有输出
*/
// loader与plugin都需要Npm install 才能正常使用
// resolve 用来拼接绝对路径
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
// webpack配置
// 入口文件
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'build.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的绝对路径
path: resolve(__dirname,'build')
},
// loader 的配置
module: {
rules: [
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/, // 正则表达式,表示为以.css结尾的文件
// 使用哪些loader进行处
// 要使用多个loader处理用use
use:[
// use数组中loader执行顺序:从右到左,从下到上,依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中,里面内容是样式字符串
'css-loader'
]
},
// 处理less文件
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
// 处理图片资源
// 问题:默认处理不了html中img图片
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 需要下载url-loader和file-loader 因为url-loader依托于file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 *1024,
// 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
// 解析时会出现问题:[object Module]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader处理)
loader: 'html-loader'
},
// 打包其他资源(除了html/js/css资源以外的资源)
{
// 排除html/js/css
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
// plugins 的配置
plugins: [
//html-webpack-plugin
//功能:默认会创建一个空的html,自动引入打包输出的所有资源(js/css)
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件,并自动引入打包输出所有资源
template: './src/index.html'
})
],
// 模式
mode: 'development', // 开发环境
// mode: 'production' // 生产环境(代码会压缩)
// 开发服务器 devServer:用来自动化(自动变异,自动打开浏览器,自动刷新浏览器....)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:npx webpack-dev-server
devServer: {
// 项目构建后的路径
contentBase: resolve(__dirname,'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open:true
}
}