php提取css生成单独文件,webpack基本使用系列-提取css成单独文件

配置css打包后输出的文件目录

第一步：安装 mini-css-extract-plugin 插件

npm i mini-css-extract-plugin -D

第二步：在plugins配置该插件

const { resolve } = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

entry: './src/js/index.js',

output: {

filename: 'js/built.js',

path: resolve(__dirname, 'build')

},

module: {

rules: [

{

test: /\.css$/,

use: [

// 创建style标签，将样式放入

// 'style-loader',

// 这个loader取代style-loader。作用：提取js中的css成单独文件

MiniCssExtractPlugin.loader,

// 将css文件整合到js文件中

'css-loader'

]

}

]

},

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html'

}),

new MiniCssExtractPlugin({

// 对输出的css文件进行重命名

filename: 'css/built.css'

})

],

mode: 'development'

};

注意：

1 MiniCssExtractPlugin.loader 取代style-loader。作用：提取js中的css成单独文件