目錄css
上節: 懶加載html
上節目錄以下:webpack
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
如今樣式是經過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
生成了單獨的css文件,瀏覽器運行bundles/index.html, 打開f12:
這樣就實現了link的外部引入
詳細配置參考:https://webpack.js.org/plugin...
下節:編寫一個loader