webpack学习笔记六：分离出css代码

注意：webpack4版本中已经弃用extract-text-webpack-plugin插件来提取css了而采用mini-css-extract-plugin。 安装依赖，还是推荐cnpm安装吧，npm总是会出点问题

cnpm install mini-css-extract-plugin --save-dev

webpack.config.js

// 生成HTML const HtmlWebpackPlugin = require("html-webpack-plugin"); // 清空文件夹 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 提取css文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = function (env, argv) { return { // 入口 entry: { main: "./src/main.js", test: "./src/js/test.js", }, // 出口 output: { path: `${__dirname}/dist`, // 公用部分代码块文件名，公用部分的代码会提取压缩到这个文件中 chunkFilename: argv.mode.production == 'production' ? "[name].[contenthash].js" : "[name].chunk.js", // 模块名+哈希字符的文件名 filename: argv.mode.production == 'production' ? "[name].[contenthash].js" : "[name].chunk.js", }, // 插件配置 plugins: [ // 打包前清理dist new CleanWebpackPlugin(), // 将css提取到一个单独的文件 new MiniCssExtractPlugin(), // 生成HTML文件并导入js和css new HtmlWebpackPlugin({ title: "webpack demo", }), ], // 处理css,图片，字体文件等 module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"], }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ["file-loader"], }, ], }, // 优化 optimization: { //压缩： production 模式下默认true // minimize: true, // 运行的公用文件，设置为single时会将所有的共享依赖合并成一个文件，当有多个入口文件时需要这样做 runtimeChunk: "single", // 动态模块导入的共享模块配置 splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: "vendors", // 值为all时，import动态导入的模块也会被打包的共享部分代码文件里,值为async时只会共享异步的模块，initial时只共享同步的模块 chunks: "initial", }, }, }, }, // 开发服务器 devServer: { // 监听文件的位置 contentBase: `${__dirname}/dist`, compress: true, port: 9000, //允许通过外部访问 host: "0.0.0.0", // 模块热替换，实现只更新局部 hot: true, }, }; };

打包后 查看完整代码可以前往github https://github.com/jddk/webpackDemo