- A+
所属分类：Web前端
针对新手入门搭建项目，Webpack5 配置手册（从0开始）
webpack安装顺序
1. `npm init -y`，初始化包管理文件 package.json 2. 新建src源代码目录 3. 新建index.html 4. `yarn add webpack webpack-cli`,安装webpack相关包 5. 在项目根目录中，创建webpack.config.js 的配置文件 6. `yarn add webpack-dev-server`,安装支持项目自动打包的工具，并配置 7. `yarn add html-webpack-plugin`,安装生成预览页面插件并配置 8. `yarn add style-loader css-loader`,安装处理css文件的loader 9. `yarn add less-loader less`,安装处理less文件的loader 10. `yarn add sass-loader node-sass`,安装处理scss文件的loader 11. `yarn add postcss postcss-loader postcss-preset-env autoprefixer`,配置postCSS自动添加css的兼容前缀（可选） 12. `yarn add url-loader file-loader`,安装处理css文件中的图片和字体文件 13. `yarn add html-loader`,安装处理html文件中的图片和字体文件 14. `yarn add @babel/core babel-loader @babel/preset-env 前面3个是必须的，后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties`,安装处理js高级语法（ES6以上） 15. 之后看下面的插件安装代码。 yarn add html-webpack-plugin yarn add style-loader css-loader yarn add less-loader less yarn add sass-loader node-sass yarn add url-loader file-loader yarn add html-loader yarn add @babel/core babel-loader @babel/preset-env 前面3个是必须的，后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties yarn add postcss postcss-loader postcss-preset-env yarn add mini-css-extract-plugin yarn add optimize-css-assets-webpack-plugin yarn add eslint eslint-loader eslint-webpack-plugin yarn add eslint-config-airbnb-base 或 eslint-config-airbnb 或 vue的eslint yarn add clean-webpack-plugin 使用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" - 生产环境图片资源打包之后，网页显示不出来，需要在图片资源的打包中添加
publicPath: "../images",这个
则是生成的页面中对图片路径的引用时，加上publicPath,这样访问时姐可以放到文件的正确地址了。 - css代码的兼容性处理，使用postcss-loader的配置，可以直接在use里加载postcss-loader的配置文件，也可以直接
使用postcss-loader,让后打包时自动在根目录中找postcss.confgi.js配置文件，来加载postcss配置，此项目使用的
外部postcss.confgi.js配置文件的配置方式。注意：还需要在package.json中定义browserlist - 另外：目前还有生产环境懒加载和eslint校验代码的功能未完成，eslint的校验遇到问题
class Person { static info = { name: 'zs' }; }，在生产环境的webpack.pub.config.js中引入来插件eslint-webpack-plugin，配置了new ESLintPlugin(),
但是提示错误信息如下，Parsing error: Unexpected token =
