上篇文章 webpack 能处理 CSS 文件, 但是 CSS 还不能提取到单独文件中, 本文针对样式添加如下操作:
1, 安装插件提取到单独文件
- yarn add mini-CSS-extract-plugin -D
- // 添加相关配置:
- plugins: [
- // 抽离 CSS 为单独文件
- new MiniCssExtractPlugin({
- filename: 'main.css'
- })
- ],
- module: {
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- use: [ MiniCssExtractPlugin.loader, 'css-loader']
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
- }
- ]
- }
2, 安装自动生成 CSS 前缀插件
yarn add postcss-loader autoprefixer -D
1, 相关配置:
- module: {
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
- },{
- test: /\.Less$/, // 匹配 Less 文件
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
- }
- ]
- }
2, 新建 postcss.config.JS:
- module.exports= {
- plugins: [ require('autoprefixer') ]
- }
3,package.JSON 添加, 如果不添加不会生成样式前缀:
- "browserslist": [
- "last 100 versions"
- ]
3, 安装样式压缩插件
yarn add optimize-CSS-assets-webpack-plugin -D
配置:
- // 压缩 model 必须是 production 才有效果
- module.exports = {
- optimization: {
- minimizer: [
- new OptimizeCssPlugin()
- ]
- },
- mode: 'production',
- plugins: [
- // 不使用 optimization 配置话, 可以在插件里配置压缩
- //new OptimizeCssPlugin()
- ]
- }
webpack.config.JS 完整配置
- // webpack 是 node 写出来的, 需要 node 的写法
- let path = require('path');
- // path.resolve 相对路径转成绝对路径
- // console.log(path.resolve('dist'));
- // 以当前目录
- // console.log(__dirname);
- // html-webpack-plugins 插件
- let HtmlWebpackPlugins = require('html-webpack-plugin');
- // 抽离 CSS 为单独文件
- let MiniCssExtractPlugin = require('mini-css-extract-plugin');
- // 导入样式压缩
- let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
- // webpack 相关配置
- module.exports = {
- // 压缩 model 必须是 production 才有效果
- optimization: {
- minimizer: [
- new OptimizeCssPlugin()
- ]
- },
- // 开发服务的配置
- devServer: {
- // 端口, 默认 8080
- port: '8099',
- // 进度条
- progress: true,
- // 启动后访问目录, 默认是项目根目录, 这个设置到打包后目录
- contentBase: './build',
- // 启动压缩
- //compress: true
- },
- // 模式, 2 种: 生产模式 (production) 和开发模式(development)
- // 开发模式不压缩打包后代码, 生产模式压缩打包后代码
- mode: 'development',
- // 入口, 表示从哪里开始打包
- entry: './src/index.js',
- // 表示出口(输出后文件相关配置)
- output: {
- // 打包后的文件名, 产生哈希
- //filename: 'bundle.[hash].js',
- // 哈希 8 位
- filename: 'bundle.[hash:8].js',
- // 输出后的路径(必须是一个绝对路径)
- path: path.resolve(__dirname, 'dist')
- },
- // 插件配置
- plugins: [
- new HtmlWebpackPlugins({
- // 模板位置
- template: 'index.html',
- // 文件名
- filename: 'index.html',
- // 生产开启, 压缩代码
- // minify: {
- // // 删除 HTML 双引号
- // removeAttributeQuotes: true,
- // // 压缩成一行
- // collapseWhitespace: true
- // },
- // 文件哈希
- //hash: true
- }),
- // 抽离 CSS 为单独文件
- new MiniCssExtractPlugin({
- filename: 'main.css'
- })
- // 压缩 CSS
- //new OptimizeCssPlugin()
- ],
- // 模块处理
- module: {
- // loader
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- // CSS-loader 处理 CSS 文件 @import 嵌套
- // style-loader 把 CSS 插入 header
- // 多个 loader 需要数组, 单个可写成字符串
- // loader 顺序: 从右向左执行, 从下到上, 单个 loader 可添加更多配置, 使用对象形式
- // use: [{loader: 'style-loader', options: ...}, 'css-loader']
- // use: [{
- // loader: 'style-loader',
- // options: {
- // // 样式插入到顶部
- // insertAt: 'top'
- // }
- // }, 'css-loader']
- // CSS-load 处理完 再 抽离, 从后往前执行 loader
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- // CSS-loader 处理 CSS 文件 @import 嵌套
- // style-loader 把 CSS 插入 header
- // 多个 loader 需要数组, 单个可写成字符串
- // loader 顺序: 从右向左执行, 从下到上, 单个 loader 可添加更多配置, 使用对象形式
- // use: [{loader: 'style-loader', options: ...}, 'css-loader']
- // use: [{
- // loader: 'style-loader',
- // options: {
- // // 样式插入到顶部
- // insertAt: 'top'
- // }
- // }, 'css-loader', 'less-loader']
- // 从后向前执行
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
- }
- ]
- }
- }
来源: http://www.jianshu.com/p/b79163ee41a9