css文件单独提取

安装MiniCssExtractPlugin插件(需要搭配webpack4版本使用)

npm i mini-css-extract-plugin -D

目录结构

在css文件夹下创建css文件a.css b.css c.css随意写样式

// a. css
#box1{
  width: 100px;
  height: 100px;
  background-color: pink;
}
// b. css
#box2{
  width: 200px;
  height: 200px;
  background-color: saddlebrown;
}
// c. css
#box3{
  width: 100px;
  height: 100px;
  background-image: url('../img/1.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
// index.html 写几个标签展示样式
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</body>

img放图片
js放index.js入口文件

import '../css/a.css';
import '../css/b.css';
import '../css/c.css';

webpack.config.js文件配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入提取css的插件

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'built')
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          // 创建style标签,将样式放入
          // 'style-loader',
          // MiniCssExtractPlugin.loader,
          // 这个loader取代style-loader. 作用: 提取js中的css文件成单独文件
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../' // 用于展示图片
            }
          },
          // 将css文件整合到js文件中
          'css-loader'
        ]
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options:{
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css' // 打包之后在built文件下生成css/built.css
    })
  ],
  mode: 'development',
  devServer:{
    open: true,
    port: 8888
  }
}

css文件兼容性处理

css兼容性处理: 就是css样式适配各种浏览器

安装postcss-loader post-preset-env

npm i postcss-loader post-preset-env -D

作用:

postcss-loader: 各种浏览器样式兼容性处理

post-preset-env: 帮postcss找到package.json中的browserslist里面的配置,通过配置加载指定的css兼容性样式

其中需要对package.json进行配置,添加browserslist对象,

"browserslist":{
                // 开发环境 --> 设置node环境变量: process.env.NODE_ENV = development
                "development": [
                  "last 1 chrome version",
                  "last 1 firefox version",
                  "last 1 safari version"
                ],
                // 生产环境,默认是看生产环境
                "production": [
                  ">0.2%",
                  "not dead",
                  "not op_mini all"
                ]
              },

注意:默认是看生产环境适配设置,如果要使用开发环境,webpack.config.js需要设置node.js环境变量

process.env.NODE_ENV = 'development';

webpack.config.js 配置代码

const { resolve } = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置node.js环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
  ... 其他配置忽略
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          {
          // 配置css文件单独提取
            loader: MiniCssExtractPlugin.loader,
            options:{
            	publicPath: '../'
            }
          },
          'css-loader', // 将css文件整合到js文件中
          // 使用loader的默认配置写法
          // 'postcss-loader',
          // 修改loader配置写法
          {
            loader: 'postcss-loader',
            options:{
              ident: 'postcss',
              plugins: () => [
                // postcss插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
}

压缩css

安装optimize-css-assets-webpack-plugin插件

npm i optimize-css-assets-webpack-plugin -D

webpack.config.js 配置

const { resolve } = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
...其他配置
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: 'development'
}

demo地址

借鉴视频: B站尚硅谷

webpack 生产环境css文件兼容性处理及单独提取