现在就基本搭建好了基本的webpack配置
const path = require('path');//引入文件模块
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入处理html的包
const {
CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/js/index.js',//打包入口文件,
output: {
path: path.resolve(__dirname, 'dist'),//打包完成后文件路径
filename: 'public/js/[name].[contenthash:10].js', //js输出文件
environment: {
//在ie浏览器低版本不支持webpack打包自带的箭头函数
arrowFunction: false, //关闭webpack的箭头函数，可选
//在ie浏览器低版本不支持const
const: false
}
},
//处理一些打包规则
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',//按需加载
//corejs版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '50',
ie: '8',
safari: '10',
edge: '17'
}
}
]
],
//开启缓存
cacheDirectory: true
}
}
]
},
{
test: /\.css$/,
//loader 顺序不能变
use: [
'style-loader',
'css-loader',
//引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions' //兼容最新两个版本的浏览器
}
]
]
}
}
},
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
//引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions'
}
]
]
}
}
},
'less-loader'
]
},
{
//处理图片资源
test: /\.(jpg|png|jpeg|gif|svg)$/,
loader: 'url-loader',
options: {
name: '[hash:10].[ext]',
esModule: false,
}
},
{
//处理html图片资源
test: /\.html$/,
//处理html文件的img图片
loader: 'html-loader',
options: {
esModule: false,
}
},
{
//处理其它资源
exclude: /\.(html|css|less|js|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
}
}
]
},
//处理插件
plugins: [
new HtmlWebpackPlugin({
filename: 'page/index.html', //打包生成后的文件，最好保持一致，
template: './src/pages/index.html',//html路径
//压缩html代码
minify: {
collapseWhitespace: true,//移除空格
removeComments: true//移除注释
}
}),
new CleanWebpackPlugin()
],
}
但是我们发现css打包到js中，我们想单独把样式打包在一个文件里面，图片资源打包在一个文件里面，还要把css进行压缩
css压缩需要的包有
cnpm i -D mini-css-extract-plugin optimize-css-assets-webpack-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module:{
{
test: /\.css$/,
//loader 顺序不能变
use: [
'style-loader',
MiniCssExtractPlugin.loader,//打包为一个css
'css-loader',
//引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions' //兼容最新两个版本的浏览器
}
]
]
}
}
},
]
},
{
test: /\.less$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,//打包为一个css
'css-loader',
//引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions'
}
]
]
}
}
},
'less-loader'
]
},
}
//处理插件
plugins: [
new HtmlWebpackPlugin({
filename: 'page/index.html', //打包生成后的文件，最好保持一致，
template: './src/pages/index.html',//html路径
//压缩html代码
minify: {
collapseWhitespace: true,//移除空格
removeComments: true//移除注释
}
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'public/css/built.[contenthash:10].css'
}),
//压缩css
new OptimizeCssAssetsPlugin(),
],
然后打包
图片资源只需要标明输出outputPath
{
//处理图片资源
test:/\.(jpg|png|jpeg|gif|svg)$/,
loader:'url-loader',
options:{
limit: 8 * 1024,
name:'[hash:10].[ext]',
esModule: false,
outputPath: 'public/images'
}
},
{
//处理html图片资源
test:/\.html$/,
//处理html文件的img图片
loader: 'html-loader',
options:{
esModule: false,
}
},
{
//处理其它资源
exclude: /\.(html|css|less|js|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'public/media',
}
}
转载：https://blog.csdn.net/Hhjian524/article/details/115673471
查看评论