webpack.dev.js
const path=require("path")//nodejs核心模块 专门用来处理路径问题
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"),//绝对路径
path:undefined,//绝对路径,但是开发环境不需要输出
// 文件名
filename:"static/js/main.js",
// 自动清空上次打包结果
clean:true,
},
// 加载器
module:{
rules:[
// loader的配置
{
test: /\.css$/i,//只检测css文件
use: [
// 执行顺序 从右到左 （从下到上）
"style-loader", //将js中css通过创建style标签使html生效
"css-loader" //将css资源编译成commenjs模块到js中
],
},
{
// 处理图片
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
{
//小于10kb转化直接渲染的base64格式
test: /\.(png|jpe?g|gif|webp)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 10kb
}
},
generator: {
// 输出图片名称
// hash：10 hash值只取前十位
filename: 'static/image/[hash:10][ext][query]'
}
},
{
test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:10][ext][query]",
},
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
}
}
]
},
// 插件
plugins: [new ESLintPlugin({
//检测哪些文件
context:path.relative(__dirname,"../src")
}),
new HtmlWebpackPlugin({
// 以public/index.html为魔板创建新的文件
// 新的文件结构一致，并且引入打包生成的资源
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")//nodejs核心模块 专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-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: [
// 执行顺序 从右到左 （从下到上）
MiniCssExtractPlugin.loader, //提取css成单独的文件
"css-loader" ,//将css资源编译成commenjs模块到js中
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
],
},
{
// 处理图片
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
{
//小于10kb转化直接渲染的base64格式
test: /\.(png|jpe?g|gif|webp)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 10kb
}
},
generator: {
// 输出图片名称
// hash：10 hash值只取前十位
filename: 'static/image/[hash:10][ext][query]'
}
},
{
test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:10][ext][query]",
},
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
}
}
]
},
// 插件
plugins: [new ESLintPlugin({
//检测哪些文件
context:path.relative(__dirname,"../src")
}),
new HtmlWebpackPlugin({
// 以public/index.html为魔板创建新的文件
// 新的文件结构一致，并且引入打包生成的资源
template:path.resolve(__dirname,"../public/index.html")
}),
new MiniCssExtractPlugin({
filename:"static/css/main.css"
}),
new CssMinimizerPlugin(),
],
// 开发服务器,不会输出资源在内存中打包 命令npx webpack serve
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否自动打开浏览器
// },
// 模式
mode:"production"
}
package.json
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "npm run dev", "dev": "webpack serve --config ./config/webpack.dev.js", "build": "webpack --config ./config/webpack.prod.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.20.2", "@babel/preset-env": "^7.20.2", "babel-loader": "^9.1.0", "css-loader": "^6.7.2", "css-minimizer-webpack-plugin": "^4.2.2", "eslint": "^8.28.0", "eslint-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^5.5.0", "less": "^4.1.3", "less-loader": "^11.1.0", "mini-css-extract-plugin": "^2.7.0", "postcss": "^8.4.19", "postcss-loader": "^7.0.1", "postcss-preset-env": "^7.8.3", "sass": "^1.56.1", "sass-loader": "^13.2.0", "style-loader": "^3.3.1", "stylus": "^0.59.0", "stylus-loader": "^7.1.0", "webpack": "^5.75.0", "webpack-cil": "^0.0.1-security", "webpack-cli": "^5.0.0", "webpack-dev-server": "^4.11.1" }, "browserslist": [ "last 2 version", "> 1%", "not dead" ] }
.eslintrc.js
module.exports = { // 继承 Eslint 规则 extends: ["eslint:recommended"], env: { node: true, // 启用node中全局变量 browser: true, // 启用浏览器中全局变量 }, parserOptions: { ecmaVersion: 6, sourceType: "module", }, rules: { "no-var": 2, // 不能使用 var 定义变量 }, };
原文地址：http://www.cnblogs.com/xiaobaizitaibai/p/16918978.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
