99 lines
3.5 KiB
Markdown
99 lines
3.5 KiB
Markdown
## 基本参数
|
|
|
|
[基本参数说明](https://webpack.docschina.org/concepts)
|
|
|
|
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配置](https://webpack.docschina.org/configuration)
|
|
|
|
**“webpack 配置的可扩展”** 是指，这些配置可以重复使用，并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 [webpack-merge](https://github.com/survivejs/webpack-merge)）将它们合并起来。
|
|
|
|
- 使用 JavaScript 控制流表达式，例如 `?:` 操作符
|
|
- 精心编写的 **模块** 提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。
|
|
- 应保证 loader 的先后顺序：[`'style-loader'`](https://webpack.docschina.org/loaders/style-loader) 在前，而 [`'css-loader'`](https://webpack.docschina.org/loaders/css-loader) 在后
|
|
|
|
## 基础文件
|
|
|
|
1. index.html是主入口
|
|
2. app.js是我们写的模块,并依据CommonJS规范导出这个模块
|
|
3. main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中
|
|
|
|
不兼容问题升级
|
|
|
|
```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
|
|
```
|
|
|