1将css 提取成单独文件+css兼容性处理+压缩css
// webpack.config.js webpack的配置文件
// 作用:指示webpack 干哪些活(当你运行webpack指令时,会加载里面的配置)
// 所有构建工具都是基于node js平台运行的~ 模块化默认采用common.js
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
//
process.env.NODE_ENV = "developement"
module.exports = {
// webpack 配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: './js/build.js',
// 输出路径
// __dirname nodejs 的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签,将js中样式资源插入进行,添加到head中生效
// 'style-loader',
// loader 取代 style-loader 。作用:提取css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//css 兼容性处理:postcss--> postcss-loader postcss-preset-env
// 对浏览器兼容处理
// "browserslist": {
//开发环境 --> 设置node环境变量: process.env.NODE_ENV = developement
// "development": [
// "last 1 chrome version",
// "last 1 firefox version",
// "last 1 safari version"
// ],
// 生产环境
// "production": [
// ">0.2%",
// "not dead",
// "not op_minni all"
// ]
// }
//使用loader的默认配置
//post-loader
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
// postcss的插件
require('postcss-preset-env')()
}
}
}
]
}, {
test: /\.less$/,
// 使用哪些loader进行处理
//使用多个loader处理 用use
use: [
// 创建style标签,将js中样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less 和less-loaders
'less-loader'
]
}, {
//打包其他资源
// 排除 css js html 资源
exclude: /\.(css|less|js|html)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
// 打包输出文件夹目录
outputPath: 'media'
}
}, {
// 问题:默认处理不了html 中的img图片
test: /\.(jpg|png|gif|jpeg)$/,
// 需要下载url-loader 和 file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理,
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
esModule: false,
// 给图片进行重新命名
// [hash:10] 取哈希值的前十位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]',
outputPath: 'imgs',
}
}, {
test: /\.html$/,
// 处理html 文件的img图片(负责引入img,从而能被url-loaderurl-loader进行处理)
loader: 'html-loader',
}
]
},
// plugins 的配置
plugins: [
// 详细plugins的配置
// html-webpack-plugin 默认会创建一个空的html,自动引入打包输出的所有资源(js/css)
new HtmlWebpackPlugin({
//复制 ./src/index.html 文件 并自动引入打包输出的所有资源(js/css)
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/build.css'
}),
// css 压缩
new optimizeCssAssetsWebpackPlugin()
],
// 模式
mode: 'development', //开发模式
// mode: 'production', //生产模式
// 开发服务器 devServer 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
// 只会在内存中编译打包,不会有任何输出
// 启动devServer 的指令为npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
}
}
在我们的package.json文件中加入
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_minni all"
]
}