webpack-senior 打包和开发测试服务

webpack的配置使用

1.在资源文件夹src 入口文件（含有main.js index.html webpack.config.js）后运行 npm init -y 初始化项目；
建立开发和生产两套配置文件webpack.config.js、webpack.pub.config.js

2.接着运行 yarn add webpack webpack-cli webpack-dev-server --dev ，创建.bebalrc文件；

3.package.json配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot",
    "pub": "webpack --config webpack.pub.config.js"
  },
  "dependencies": {
    "@babel/runtime": "^7.13.7",
    "@types/webpack": "^4.41.26",
    "del": "4",
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.13.7",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-mobx": "^2.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.2.0",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.3.9",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.24.2",
    "webpack-cli": "3",
    "webpack-dev-server": "^3.11.2"
  }

4.webpack.config.js配置（开发）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output: {
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[//插件
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.(sa|le|sc|c)ss$/,   use: ["style-loader", "css-loader","sass-loader", "less-loader"] },
            { test: /\.(png|gif|bmp|jpg)$/,   use: 'url-loader?limit=5000' },
            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

5.webpack.pub.config.js配置（生产）

const path = require('path')

//导入 打包html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//导入每次删除文件夹的插件
//此下一行为错误引用，{ CleanWebpackPlugin }为固定导入法，引用时用new CleanWebpackPlugin()
//const cleanWebpackPlugin = require('clean-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//导入 分离css文件 的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry:{
        vendors:['jquery'],  //vendors是待抽离模块名称，如：'vue'、'jquery'
        main:{import:path.join(__dirname,'./src/main.js'),dependOn:'vendors'}
    },
    output: {
        path:path.join(__dirname,'./dist'),
        filename:'js/[name].bundle.js'  //在 output 的 filename 选项处设置打包 html 文件位置和名称
    },
    plugins:[//插件
        new CleanWebpackPlugin(),  //删除打包文件 dist 的插件
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'   //在 HtmlWebpackPlugin 的 filename 选项处设置打包html 文件位置和名称
        }),
        new MiniCssExtractPlugin({
            filename: 'css/style.css'   //在 MiniCssExtractPlugin 的 filename 选项处设置打包 css 文件位置和名称
          })
    ],
    module: {
        rules: [
            { test: /\.(sa|le|sc|c)ss$/i,  use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: '../'  // 在 css 的 loader 处设置 css 文件中的路径需要增加的‘公共路径’
                }
              },"css-loader","sass-loader", "lessi-loader"] },
            { test: /\.(png|gif|bmp|jpg)$/i,  use: 'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]' }, //在 url-loader 处设置打包 images 位置和名称信息
            { test: /\.js$/i,use:'babel-loader', exclude:/node_modules/i}
        ]
    },
}

6…bebalrc文件配置

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

总结

完成基本webpack-senior配置：可对项目文件（js、css、images、html）进行发布前打包处理，可以处理ES高级语法；对热更开发项目方便进行测试。版本webpack@5
如果怕麻烦可以直接打开以下分享链接拿现成的框架
链接：https://pan.baidu.com/s/1wH8ur9_qSSMvVFBDBqjgYg
提取码：0228

下载后安装环境：1.运行 npm init -y 、2. npm install