针对新手入门搭建项目，Webpack5 配置手册（从0开始）
使用npx babel-upgrade将所有关于babel的插件都升级都最新版本以适应兼容性
在.babelrc 中配置，或者在package.json中直接添加 { "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ] } webpack.config.js中配置插件 const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js', }, // 插件 plugins: [ // html new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html', }), // 打包前清除dist new CleanWebpackPlugin(), ], // Loaders 部分 module: { rules: [ { // test设置需要匹配的文件类型，支持正则 test: /\.css$/, // use表示该文件类型需要调用的loader use: ['style-loader', 'css-loader'], }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, { test: /\.(png|gif|bmp|jpg)$/, use: { loader: 'url-loader', options: { limit: 8 * 1024, // 图片取10位hash和文件扩展名 name: '[hash:10].[ext]', // 关闭es6模块化 esModule: false, // 图片资源的输出路径 outputPath: 'images', }, }, }, // 处理html中img资源 { test: /.\html$/, loader: "html-loader" }, // 处理其他资源(一般指的就是字体资源等) // { // exclude: /\.(html|js|css|less|scss|jpg|png|gif)/, // loader: "file-loader", // outputPath:'media' // }, { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, { test: /\.js/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'], }, }, }, ], }, // 使用webpck-dev-server时配置 devServer: { historyApiFallback: true, contentBase: path.join(__dirname, './dist'), open: true, hot: true, quiet: true, port: 3000, }, }; webpack.config.js中配置插件 const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); // 导入每次删除文件夹的插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 复用loader加载器 const commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', // css兼容性处理 // 还需要在package.json中定义browserlist 'postcss-loader' // 下面是根据路径找配置文件 // { // loader: 'postcss-loader', // options: { // postcssOptions:{ // config:'./postcss.config.js' // } // } // } ]; // 定义node.js到环境变量，决定使用browserslist的哪个环境 process.env.NODE_ENV = 'production'; module.exports = { entry: './src/main.js', output: { filename: 'js/bundle.js', path: resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ ...commonCssLoader, ] }, { test: /\.less$/, use: [ ...commonCssLoader, 'less-loader' ] }, // { // // eslint语法检查，在package.json中eslintConfig --> airbnb的校验规则 // test: /\.js$/, // exclude: /node_modules/, // // 优先执行，先执行eslint在执行babel // enforce: 'pre', // loader: 'eslint-loader', // options: { // fix: true // } // }, { // js代码兼容性处理 test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', //基础预设 { useBuiltIns: 'usage', // 按需加载 corejs: { version: 3 }, targets: { // 兼容到什么版本到浏览器 chrome: '60', firefox: '50', ie: '9', safari: '10', edge: '17' } } ]], plugins: ['@babel/transform-runtime','@babel/plugin-proposal-class-properties'], } }, { test: /\.(png|gif|bmp|jpg)$/, use: { loader: 'url-loader', options: { limit: 8 * 1024, // 图片取10位hash和文件扩展名 name: '[hash:10].[ext]', // 关闭es6模块化 esModule: false, // 图片资源的输出路径 outputPath: 'images', // publicPath : 这个则是生成的页面中对图片路径的引用时，加上publicPath。 publicPath: "../images" } } }, // 处理html中img资源 { test: /.\html$/, loader: 'html-loader' }, // 处理其他⽂件 { exclude: /\.(js|css|less|html|jpg|png|gif)/, loader: 'file-loader', options: { outputPath: 'media', }, }, ] }, plugins: [ // css代码单独抽离 new MiniCssExtractPlugin({ filename: 'css/bundle.css' }), // css代码压缩 new OptimizeCssAssetsWebpackPlugin(), // html文件压缩 new HtmlWebpackPlugin({ template: './src/index.html', minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true } }), // new ESLintPlugin({ // exclude:'node_modules', // fix:true // }), new CleanWebpackPlugin(), ] , mode: 'production' }; postcss.config.js配置 module.exports = { // You can specify any options from https://postcss.org/api/#processoptions here // parser: 'sugarss', plugins: [ // Plugins for PostCSS // ["postcss-short", { prefix: "x" }], "postcss-preset-env", ], }; .eslintlrc.js配置 module.exports = { root: true, env: { commonjs: true, es6: true, browser: true, node: true }, extends: [ "airbnb-base", // 'plugin:vue/essential', // '@vue/standard' ], parserOptions: { ecmaVersion: 7, ecmaFeatures: { jsx: true, experimentalObjectRestSpread: true, }, parser: 'babel-eslint', sourceType: "module" }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } } .gitignore配置 node_modules/* package-lock.json dist/* .idea/* package.json配置 { "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "serve": "webpack serve", "dev": "webpack --config webpack.config.js", "build": "webpack --config webpack.pub.config.js" }, "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] } } 遇到的问题开发环境，热部署devServer的重新配置，在webpack.config.js中添加热部署的部分代码，之后在package.json
文件内scripts中配置相应的webpack
生产环境在package.json中的配置"build": "webpack --config webpack.pub.config.js"