webpack打包vue项目的时候默认会把vue里的css打包到页面上。
webpack.config.js里的plugins加上以下配置
new webpack.LoaderOptionsPlugin({test:/\.vue$/,
options: {
vue: {
loaders: {
css: ExtractTextPlugin.extract({
fallback:'vue-style-loader',
use:'css-loader',
publicPath:"../"
}),
}
}
}
)
这样可以把css提取到公共style里。
文接上回，继续看 webpack 的插件：这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。
mini-css-extract-plugin作用： 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身，不过前者在 webpack4 算是废了。
安装依赖：
然后引入，配置提出 css 样式，重命名 css 文件。
其中上面的 rules 还可以修改变成这样：
打包出来的 index.css将会插入 index.html 里面的 head 标签里面。
现在如果使用下面的样式：
其中 transform: rotate(45deg) 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理，这个 loader 就叫 postcss-loader 。
安装依赖：
配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。
完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下：
打包之前的 css 样式为：
经过插件处理之后为：
如果你不想新建一个 post.config.js 文件的话可以这样配置：
处理的效果是完全和分开写一样的。
这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效，所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。
安装依赖：
注意： 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode （模式）一定的是 生产模式（production） 。
简单配置就能压缩 css 和 JS 了。还是很有用的，压缩完成明显文件变小了。
友情提示：
build：webpack配置文件config：webpack配置文件
node_modules：安装的依赖包
src：所有的组件都写在里面
static：所有第三方的静态资源存放目录
.babelrc：babel的一些配置（比如将es6编译成es5的一些配置）
.editorconfig：编辑器的一些配置（包括编码格式，缩进风格，换行格式）
.gitignore：配置Git仓库忽略的一些文件（不会上传）
.postcssrc.js 配置postcss的文件（主要是css样式兼容性，自动加前缀（autoprefixer））
index.html：入口html文件。
package.json: 项目的一些配置信息（项目的一些具体信息）
package-lock.json就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
autoprefixer：是用于给css3属性自动加属性前缀的
babel系列都是处理语法的
chalk：适用于格式化输出命令行信息的，比如run dev以后的start...
copy-webpack-plugin：在webpack中拷贝文件和文件夹
extract-text-webpack-plugin：为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象
file-loader：操作文件
friendly-errors-webpack-plugin：能够更好在终端看到webapck运行的警告和错误
html-webpack-plugin ：插件的基本作用就是生成html文件
node-notifier：来发送桌面消息,包括应用状态改变以及错误信息
optimize-css-assets-webpack-plugin：压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
ora：命令行里自动运行的信息提示
portfinder：可以帮你找出正在运行的进程打开了哪些端口
rimraf：跑shell命令 rm-rf 的工具
semver：是用来对特定的版本号做判断的(check-version.js)中
shelljs：selljs是在node里跑shell命令的工具，比如‘rm -rf’在(check-version.js)中，属于Unix命令
uglifyjs-webpack-plugin：压缩js
webpack：打包工具
webpack-bundle-analyzer：打包优化工具，可得到一个可视化模块大小界面
webpack-dev-server：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率
webpack-merge：合并
