开发环境：只运行本地资源不打包dist

---

对于在config目录下的webpack.dev.js    

1.在根目录下运行

npx webpack serve --config ./config/webpack.dev.js

2.在package.json文件中配置

"dev":"npx webpack serve --config ./config/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:{path:undefined,//开发模式没有输出，不需要指定输出目录//入口文件打包输出的文件名filename:"static/js/main.js",//clean: true,// 开发模式没有输出，不需要清空输出结果},module:{rules:[//loader的配置{test: /\.css$/, //只检测.css文件use: [//执行顺序从右到左，从下到上'style-loader', //将js中的css通过创建style标签添加到html文件中生效'css-loader'],//将css资源编译成common.js到webpack中},{test: /\.less$/i,//loader:"xxx" 只能使用一个loader use可以使用多个use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},{test: /\.styl$/,// loader: 'stylus-loader', // 将 Stylus 文件编译为 CSSuse: [// compiles Less to CSS'style-loader','css-loader','stylus-loader',],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {//小于10kb的图片转base64 减少请求数量 但是体积会大一点maxSize: 10 * 1024 // 10kb}},generator: {filename: 'static/images/[hash:10][ext][query]'//图片命名有点长 [hash:10]只取十位}},{test: /\.(ttf|woff2?)$/,type: 'asset/resource',generator: {filename: 'static/fonts/[hash:10][ext][query]'}},{test: /\.(mp3|mp4|avi)$/,type: 'asset/resource',generator: {filename: 'static/media/[hash:10][ext][query]'}}, {test: /\.js$/,exclude: /(node_modules)/,//排除node_modules中的js文件use: {loader: 'babel-loader',// options: {//   presets: ['@babel/preset-env'],// },},}]},//插件需要引用才能使用plugins:[//插件的配置new ESLintPlugin({//检测哪些文件context: path.resolve(__dirname,'../src'),}),new HtmlWebpackPlugin({//模版 新的html文件结构与原来一致 会自动引入打包的资源template:path.resolve(__dirname,'../public/index.html')})],//开发服务器 不会输出资源 在内存中编译打包devServer:{host:"localhost",port:3000,open:true // 是否自动打开浏览器},//模式mode:"development"
}