webpack中css文件的代碼分割
阿新 • • 發佈：2019-05-11
等等 tcs install sync sets char .com webpack 輸出
module.exports = { output: { filename: ‘[name].js‘, chunkFilename: ‘[name].chunk.js‘, path: path.resolve(__dirname, ‘../dist‘) } }
在看別人寫的webpack，output配置項，肯跟會碰到chunkFilename這樣的配置項，那這個是什麽意思呢？filename和chunkFilename有什麽區別呢？首先看個例子
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id=‘root‘></div> </body> </html>
index.js
async function getComponent() { const { default: _ } = await import(/* webpackChunkName:‘lodash‘ */‘lodash‘); const element = document.createElement(‘div‘); element.innerHTML = _.join([‘1‘, ‘2‘], ‘-‘); return element } document.addEventListener(‘click‘, ()=> { getComponent().then( element =>{ document.body.appendChild(element); }) })
webpack.common.js
module.exports = { entry: { main: ‘./src/index.js‘ }, output: { filename: ‘[name].js‘, chunkFilename: ‘[name].chunk.js‘, path: path.resolve(__dirname, ‘../dist‘) } }
運行npm run dev-build打包。打開dist目錄，發現第三方模塊打包好的名字叫vendors~lodash.chunk.js，不再是之前的vendors~lodash.js。我們的入口文件對應的都是filename的輸出。如果不是入口文件，是異步引入或者間接產生的js文件，他就會走chunkFilename這個輸出的配置參數。
接下來進入主題，css代碼的分割 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id=‘root‘></div> </body> </html>
index.js
import ‘./style.css‘;
console.log(‘ hello world ‘);
style.css
body{ background: #abcdef; }
運行npm run dev-build。發現打包生成的文件只有main.js 和 vendors~main.chunk.js。但是瀏覽器打開index.html。背景已經有了。這是怎麽回事呢？webpack在做css的打包的時候，會直接打包到js裏面
如果我希望在打包生成代碼的時候，如果我引入了css文件，那麽把css文件打包到dist目錄下。而不是直接引入到js文件裏面。那麽就需要引入一個插件
https://webpack.js.org/plugins/mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin安裝好之後看怎麽使用，首先要在webpack中引入這個插件。首先打開線上配置文件
webpack.prod.js
const merge = require(‘webpack-merge‘); const commonConfig = require(‘./webpack.common.js‘); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); const prodConfig = { mode: ‘production‘, devtool: ‘cheap-module-source-map‘, module: { rules:[{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: ‘css-loader‘, options: { importLoaders: 2 } }, ‘sass-loader‘, ‘postcss-loader‘ ] },{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘ ] }] }, plugins:[ new MiniCssExtractPlugin({}) ] } module.exports = merge(commonConfig, prodConfig);
然後對應到webpack.common.js裏面刪除css,scss相關到配置。運行npm run build。發現多出了兩個文件main.css 和 main.css.map
css打包好後，是未壓縮的，要將打包好的css進行壓縮，安裝，optimize-css-assets-webpack-plugin
npm install optimize-css-assets-webpack-plugin -D在webpack.props.js引入並配置
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘); module.exports = { optimization: { minimizer: [new OptimizeCSSAssetsPlugin({})], }, }
運行 npm run build。會發現css文件被自動的合並壓縮。
https://webpack.js.org/plugins/mini-css-extract-plugin也可以實現
optimization: { splitChunks: { cacheGroups: { styles: { name: ‘styles‘, test: /\.css$/, chunks: ‘all‘, enforce: true, // 忽略到前面到配置，不管是minSize,maxSize等等，只要是css，都打包到同一個文件中 }, }, }, },
webpack中css文件的代碼分割