webpack4.29.x成神之路(十九) css代碼分割

目錄css

上節: 懶加載html

上節目錄以下:webpack

clipboard.png

css代碼分割通常用於生產環境,先修改src/index.js:web

import './styles/index.less';
import _ from 'lodash';

const root = document.getElementById('root');
root.innerText = _.join(['hello', 'webpack']);

styles/index.less:npm

#root{
  color: blue;
}

而後npm run build,瀏覽器運行bundles/index.html:segmentfault

clipboard.png

如今樣式是經過style標籤內聯在頁面上的。瀏覽器

如今修改配置,讓樣式經過link標籤外部引入:
webpack/webpack.prod.js:less

const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      }, 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
});

安裝mini-css-extract-plugin:npm i mini-css-extract-plugin -Dpost

而後打包npm run build:ui

clipboard.png

生成了單獨的css文件,瀏覽器運行bundles/index.html, 打開f12:

clipboard.png

這樣就實現了link的外部引入

詳細配置參考:https://webpack.js.org/plugin...

下節:編寫一個loader

相關文章
相關標籤/搜索