本文主要是记录在webpack学习中的基础配置：
webpack.dev.js 主要是对开发模式进行配置
const path = require("path")
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口
entry: "./src/main.js", //相对路径
//输出
output: {
//文件输出路径
//__dirname nodejs的变量，代表当前文件的文件夹目录
//由于开发模式是在内存中编译，所以不会有输出，这里设置为undefined即可
path: undefined,
//生产文件名
filename:"static/js/main.js",
//自动清空上次打包的内容,由于开发模式上在内存中编译，不会生成文件，不需要清空
//clean:true
},
//加载器 由于html中无法直接处理其他类型的文件，这里使用加载器进行引入处理
module: {
rules: [
//loader的配置
{
test: /\.css$/i, //只检测.css文件
use: [
//执行顺序，从右往左（从下到上）
'style-loader', //将js中css通过创建style标签添加html文件中生效
'css-loader' //将css资源编译成commonjs的模块到js
],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
//小于10kb的图片转为base64
//优点:减少请求数量 缺点:提及会更大
maxSize: 13 * 1024 // 4kb
}
},
generator: {
//转换后文件名生成规则
filename: 'static/images/[hash][ext][query]'
}
},
//其他资源引入
{
test: /\.(ttf|woff2?)$/,
type: 'asset/resource',
generator: {
filename: 'static/media/[hash:10][ext][query]'
}
},
//这里babel用于将js向下兼容
{
test: /\.js$/,
exclude: /node_modules/, //排除node_modules中的js文件(这些文件不处理)
use: {
loader: 'babel-loader',
// options: {
//下面这一行可以写在babel.config.js文件中
// presets: ['@babel/preset-env'],
// },
},
},
],
},
//插件
plugins : [
//plugin的配置 开启eslint代码检查
new ESLintPlugin({
//检测哪些文件
context:path.resolve(__dirname,"../src")
}),
//自动引入html文件引入的资源
new HtmlWebpackPlugin({
//模板:以public/index.html文件创建新的html文件
//新的html文件特点：1.结构和原来一致2.自动引入打包的资源
template:path.resolve(__dirname,"../public/index.html")
})
],
//开发服务器:不会输出资源，在内存内编译打包 npx webpack serve 运行
devServer: {
host: "localhost", //启动服务器域名
port: "3000", //启动服务器端口号
open:true, //是否自动打开浏览器
},
//模式
mode:"development"
}
webpack.prod.js 主要对生产模式配置
const path = require("path")
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口
entry: "./src/main.js", //相对路径
//输出
output: {
//文件输出路径
//__dirname nodejs的变量，代表当前文件的文件夹目录
path: path.resolve(__dirname,"../dist"), //绝对路径
//文件名
filename:"static/js/main.js",
//自动清空上次打包的内容
clean:true
},
//加载器
module: {
rules: [
//loader的配置
{
test: /\.css$/i, //只检测.css文件
use: [
//执行顺序，从右往左（从下到上）
'style-loader', //将js中css通过创建style标签添加html文件中生效
'css-loader' //将css资源编译成commonjs的模块到js
],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
//小于10kb的图片转为base64
//优点:减少请求数量 缺点:提及会更大
maxSize: 13 * 1024 // 4kb
}
},
generator: {
filename: 'static/images/[hash][ext][query]'
}
},
{
test: /\.(ttf|woff2?)$/,
type: 'asset/resource',
generator: {
filename: 'static/media/[hash:10][ext][query]'
}
},
{
test: /\.js$/,
exclude: /node_modules/, //排除node_modules中的js文件(这些文件不处理)
use: {
loader: 'babel-loader',
// options: {
//下面这一行可以写在babel.config.js文件中
// presets: ['@babel/preset-env'],
// },
},
},
],
},
//插件
plugins : [
//plugin的配置
new ESLintPlugin({
//检测哪些文件
context:path.resolve(__dirname,"../src")
}),
new HtmlWebpackPlugin({
//模板:以public/index.html文件创建新的html文件
//新的html文件特点：1.结构和原来一致2.自动引入打包的资源
template:path.resolve(__dirname,"../public/index.html")
})
],
//模式
mode:"production"
}
package.json中简化执行代码通过npm start 来完成开发模式执行
"scripts": {
"start": "npm run dev",
"dev":"webpack serve --config ./config/webpack.dev.js",
"build":"webpack --config ./config/webpack.prod.js"
},
