一，遇到的问题
1.
报错如下图
2.引用css,less 样式但是没有引入相关插件时，npm run build 会以下报错，提醒需要相关插件来处理css,less
3.配置postcss-loader autoprefixer 报错，配置如下
报错如下
查看官网配置，解决，编译成功
4.配置拆分css loader报错，没解决 报错如下：
配置如下
5.在css中background-image:
该图片在dist下有
但是运行dist下index.html 不显示背景图片
6.安装babel 知乎文档报错 如下图，看官网使用
npm install -D babel-loader @babel/core @babel/preset-env webpack
引入babel-polyfill报错 使用 entry: ["@babel/polyfill,path.resolve(__dirname,'../src/index.js')"]
报错如下
7.vue-loader安装成功但是运行npm run build 报错 安装：
npm i -D vue-loader vue-template-compiler vue-style-loader
npm i -S vue
配置如下图
配置-7-1
配置-7-2
运行npm run build 报错下图 错-7-1 提示找不到vue-loader/lib/plugin 查看node_modules 发现没有lib文件夹，plugins在dist/下
错-7-1
于是路径改为const VueLoaderPlugin = require('vue-loader/dist/plugin'); 编译报错图错-7-2
错-7-3
查看官网发现配置是
配置-7-3
打包报错找不到'vue'
错-7-4
错-7-5
此时main.js是配置-7-4
查看package.json 发现vue3,查看vue3官网引入vue以及app方法，改为下图配置-7-5
配置-7-5
npm run build 成功，但是npm run dev 报错如下图
错-7-6
二.相关总结
1.plugins
1.1 HtmlWebpackPlugin 将打包生成的js文件自动引入到对应的/dist/html 的body中
如果webpack 的输出中有任何 CSS 资源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入
1.2 clean-webpack-plugin 清除 上次打包的所有文件 1.3 拆分css
mini-css-extract-plugin(将所有的css样式合并为一个css文件)
webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件
拆分为一一对应的多个css文件
使用 extract-text-webpack-plugin@next
2.loader www.cnblogs.com/goloving/p/… 2.1解析css css-loader style-loader 解析less less less-loader
2.2 没看到效果 编译前后效果没有实现，不会操作，也没找到真正前后效果的文档 postcss-loader 使用 PostCSS 处理 CSS 的 loader
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
2.3 打包 图片、字体、媒体、等文件 file-loader url-loader
file-loader就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件url），并将文件移动到输出的目录中
url-loader 一般与file-loader搭配使用，功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件移动到输出的目录中
2.4 babel-loader 将 ES6/7/8语法转换为ES5语法，但是对新api并不会转换 新api并不会转换 例如(promise、Generator、Set、Maps、Proxy等) 使用polyfill
npm i @babel/polyfill
2.5 vue-loader
