Front-end/vue/webpack打包.md

基本参数

基本参数说明

1. 入口(entry)
2. 输出(output)
3. loader
4. 插件(plugin)
5. 模式(mode)
6. 浏览器兼容性(browser compatibility)
7. 环境(environment)

默认配置

1. 入口起点为 src/index.js
2. 然后会在 dist/main.js 输出结果
3. 并且在生产环境开启压缩和优化
4. 通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。

webpack.config.js配置

“webpack 配置的可扩展” 是指，这些配置可以重复使用，并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并起来。

• 使用 JavaScript 控制流表达式，例如 ?: 操作符
• 精心编写的 模块 提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。
• 应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后

基础文件

1. index.html是主入口
2. app.js是我们写的模块,并依据CommonJS规范导出这个模块
3. main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中

不兼容问题升级

npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin

临时删除一些错误包

    "eslint-loader": "^2.0.0",
        "element-ui": "^2.15.7",
            "less-loader": "6.0.0",
                "jest": "^27.4.5",
    "jest-serializer-vue": "^0.3.0",
        "babel-jest": "^27.4.5",
            "vue-jest": "^1.0.2",
              "friendly-errors-webpack-plugin": "2.0.0-beta.2",  
                  "uglifyjs-webpack-plugin": "2.2.0",
                      "babel-plugin-transform-runtime": "^7.14.0",
    "@babel/core": "^7.12.3",
    "@babel/plugin-transform-runtime": "7.12.13",
    "@babel/preset-env": "^7.16.7",
    "babel-eslint": "^10.0.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-vue-jsx": "4.0.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    
    "@babel/preset-env":"7.16.7"
        "babel-plugin-react-intl": "^8.2.15",
        
        
    npm instal babel-preset-env
    npm install babel-preset-stage-2
    
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    
    
    -----------------------------------
        "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "babel-loader": "^8.2.3",
    "babel-preset-stage-2": "7.0.0-beta.3",
    "babel-runtime": "6.26.0",
    
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
        "@babel/preset-stage-2": "^7.8.3",
    
    
    
TypeError: src/main.js: this.setDynamic is not a function