vue中webpack默认配置_vue 学习记录八——webpack中常见的配置项

在web开发中，我们得使用到js(es6)、css、html等技术，需要对资源文件管理，例如图片，同时还需要对性能、热加载等进行处理；这些功能都是可以在webpack中进行配置管理的，下面具体介绍说明。

1、devServer:在我们开发中能够自动使我们的代码即时起作用，自动帮我们刷新页面，启动服务器后能够自动打开页面，就是使用了devServer，devServer只会在内存中打包，不会进行任何的文件输出。在使用vue手脚架搭建的项目中，devServer的配置是在build/webpack.dev.conf.js中。

2、CSS：CSS配置可以集中打包在最终输出的js文件中，也可以进行打包成一个个独立的文件，可以进行压缩。CSS 开发中可能使用less、sass，相应的需要使用less-loader、sass-loader、css-loader

1)基础配置：

安装mini-css-extract-plugin 插件：npm i mini-css-extract-plugin --D

引用插件 ：const miniCssExtractPlugin = require 'mini-css-extract-plugin'

配置插件使用：

配置CSS loader,既然使用了

3)、CSS 兼容性处理,需要使用到postcss-loader，和postcss-preset-env插件

安装：npm i postcss-loader postcss-preset-env --D

loader 配置，这样就可以在生成css文件的时候不需要写自己写太多的浏览器兼容语句了，css生成的文件会自动处理的，非常的方便。

4)压缩CSS:需要使用到Optimize-css-assets-webpack-plugin 插件

安装插件：npm i optimize-css-assets-webpack-plugin --D

3、打包html资源配置,需要使用到html-webpack-plugin插件，vue 手脚架搭建的环境默认已经安装了此插件

安装：npm i HtmlWebpackPlugin --D

压缩html,配置html-webpack-plugin 项的minify配置项即可：

4、打包图片资源，使用url-loader，在vue手脚架搭建的项目中已经有默认的配置生成，

5、js 的babel 转换，在vue手脚架搭建的项目中如果选择安装babel会有相应的配置，

6、其他资源:其他资源是除了上面的配置项目外的配置，例如字体等

7、resolve 配置项：解析模块的配置项，

1)alias：配置路径别名，例如一个路径深度比较高，可以配置一个别名，在引用的时候便可以别名替代；

2)extensions：配置省略文件路径的后缀名，例如 a.js 可以在引用的时候 a 即可

8、optimization：此项必须在生产模式下进行配置