webpack学习配置
基本配置const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
mode: 'development',//生产模式上线production 开发模式 development 加空格
// entry: './src/index.js',//单入口配置入口文件
// entry:[//多入口文件 打包最终形成一个文件
// './src/index.js',
// './src/mins.js'
// ],
// entry:{//多入口文件 打包生成几个文件
// one:'./src/index.js',
// two:'./src/mins.js'
// },
entry:{//多入口文件特殊用法
vendor:['./src/js/jquey.js','./src/js/public.js'],
index:'./src/js/index.js',
home:'./src/js/home.js'
},
output: {//输出位置
path: path.resolve(__dirname, 'dist'),//输出目录
filename: ".js",//指定输出文件名
},
module:{//打包css img资源规则
rules:[
]
},
plugins:[//插件 范围更广的规则打包html
new HtmlWebpackPlugin({//几个页面new几个
template:'./src/index.html',
filename:'index.html',//指定打包文件
chunks:['index','vendor'],//指定导入那个js
minify:{
collapseWhitespace:true,//移除空格
removeComments:true//移除注释
}
}),//默认会创建一个空 的 自动引入(css/js)
new HtmlWebpackPlugin({//几个页面new几个
template:'./src/home.html',
filename:'home.html',//指定打包文件
chunks:['home','vendor'],//指定导入那个js
minify:{
collapseWhitespace:true,//移除空格
removeComments:true//移除注释
}
}),//默认会创建一个空 的 自动引入(css/js)
]
} 有完整的webpack配置吗 lixiangrun4655 发表于 2021-8-6 21:20
有完整的webpack配置吗
在B站看哪个高洛峰学习的，链接这个你可以看看https://www.bilibili.com/video/BV1Pz4y1S7Uv?from=search&seid=7051298189516980536&spm_id_from=333.337.0.0
我的webpakc配置最终是这个样子的
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
constOptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')
module.exports={
mode: 'development',//生产模式上线production 开发模式 development 加空格
entry: './src/index.js',//单入口配置入口文件
output: {//输出位置
path: path.resolve(__dirname, 'dist'),//输出目录
filename: ".js",//指定输出文件名
},
module: {
rules: [
// { test: /\.css$/, use: ['style-loader','css-loader'] },
{ test: /\.css$/, use: },
{ test: /\.less$/, use: },
{ test: /\.scss$/, use: },
// { test:/\.(png|jpg|gif|jpeg)$/,use:['url-loader',{loader:'file-loader',options:{}}]}
{ test: /\.(png|jpg|gif|jpeg)$/,loader:'url-loader',options:{
publicPath: './images/',//
outputPath: 'images/',//指定图片路径
limit: 1028 * 8,//1028字节是1kb
name:'.',
esModule:false
}},
{
test:/\.html$/,
loader:'html-loader',
options:{
esModule:false
}
}
],//打包css 和less
},
plugins:[//插件 范围更广的规则打包html
new HtmlWebpackPlugin({//几个页面new几个
template:'./src/index.html',
filename:'index.html',//指定打包文件名称
}),//默认会创建一个空 的 自动引入(css/js)
new MiniCssExtractPlugin({//生成单独的css
}),
new OptimizeCssAssetsWebpackPlugin()
]
}
页:
[1]