提取css单独文件
下载插件 npm install --save-dev mini-css-extract-plugin
配置文件:webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {
resolve }=require('path')
module.exports={
entry:'./src/js/main.js',
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
//创建style标签,将样式放入style-loader
//将css文件整合到js文件中
rules:[{
test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader']}]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename:'css/built.css',
})
],
mode:'development'
}
主要添加了下面2个
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
filename:'css/built.css',
})
l.css
#box2{
width: 100px;
height: 100px;
background-color: red;
}
t.css
#box1{
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
运行 webpack
生成一个built.css,将l.css和t.css内容整合在一起
css兼容性
下载 loader : npm install --save-dev postcss-loader postcss-preset-env
配置文件:
const {
resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
/*
css兼容性处理:postcss --> postcss-loader postcss-preset-env
帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
"browserslist": {
// 开发环境 --> 设置node环境变量:process.env.NODE_ENV = development
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境:默认是看生产环境
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
// 使用loader的默认配置
// 'postcss-loader',
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
};
package.json
"browserslist": {
"development": [
"last 1 chrome version", //适应最新的版本
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
最后运行webpack