const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require("autoprefixer");
//占位符
//hash chunkhash name id
module.exports = {
//代码分割
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
axios:{
test:/axios/,
name:'axios'
},
easyqrcodejs:{
test: /easyqrcodejs/,
name:'easyqrcodejs'
},
jquery:{
test: /jquery/,
name:'jquery'
}
// defaultVendors: {
// test: /[\\/]node_modules[\\/]/, // 正则匹配文件，这里匹配的是node_modules
// },
},
},
usedExports: true,// 树摇
minimize: true, // 是否压缩
},
devServer: {
hot:true,
// host:'0.0.0.0',
// port:8023,
open: true,
client: {
progress: true,
},
proxy: {
"/hjfs": {
target: "http://192.168.1.101:8023",
changeOrigin: true,
pathRewrite: {'^/hjfs': ''},
}
},
setupMiddlewares: (middlewares, devServer) => {
devServer.app.post('/hjf/getname', (req, res) => {
res.send({
name: 'sssss'
})
})
return middlewares
},
},
//构建模式 production
mode: "production",
devtool:false,
// devtool: "source-map",
//上下文 项目打包的相对路径
// context: "",
//入口文件
// entry: "./src/index.js",
// output: {
// //构建的文件资源路径，必须是绝对路径
// path:path.resolve(__dirname,"./dist"),
// //构建的文件资源叫啥
// filename: "index.js"
// }
//多入口
entry: {
index: './src/index.js',
other: './src/other.ts'
},
output: {
clean: true,
//构建的文件资源路径，必须是绝对路径
// path:path.resolve(__dirname,"./dist"),
//构建的文件资源叫啥----实际占位符
// filename: "./js/[name]-[chunkhash:6].js"
filename: "./js/[name].js"
},
resolve: { //文件扩展名需要添加ts
extensions: ['.js'],
alias: {
aa:'../node_modules/jquery/dist/jquery.js'
}
},
//cdn优化，会直接用cdn引入
externals:{
jquery:'jQuery',
},
module: {
rules: [
{
test: /\.js?$/, // js
exclude:/node_modules/,
use:[
{
loader: "babel-loader",
options: {
presets:[
[
'@babel/preset-env',
{
corejs:3,
useBuiltIns:'usage',
targets:{
ie:6
}
}]
]
}
},
],
},
{
oneOf: [
{
test:/\.jsx$/,
exclude:/node_modules/,
use:[
//babel这里其实涉及到了一些写法，主要还是要看官网文档为主
{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-react",
// {
// pragma: "dom", // default pragma is React.createElement (only in classic runtime)
// pragmaFrag: "DomFrag", // default is React.Fragment (only in classic runtime)
// throwIfNamespace: false, // defaults to true
// runtime: "classic" // defaults to classic
// // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
// }
]
]
}
}
]
},
{
test: /\.(jpg|png|jpe?g|gif)$/,
exclude:/node_modules/,
type: "asset/resource",
generator: {
filename: 'static/img/[name][ext]'
},
parser:{
dataUrlCondition:{
maxSize:1000 * 1024
}
}
// use:["file-loader"]
},
{
test: /\.css$/,
include: path.resolve(__dirname,'src'),
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
autoprefixer({
overrideBrowserslist: ["last 50 versions", ">1%"]
})
]
}
}
},
// "css-loader"
]
},
{
test: /\.less$/,
include: path.resolve(__dirname,'src'),
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
autoprefixer({
overrideBrowserslist: ["last 50 versions", ">1%"]
})
]
}
}
},
"less-loader"
]
},
{
test: /\.ts$/,
exclude: /node-modules/,
use: [
{
loader: "babel-loader",
options: {
presets:[
[
"@babel/preset-env",
{
corejs:3,
useBuiltIns:'usage',
targets:{
ie:6
}
}
]
]
}
},
'ts-loader'
],
}
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // 让webpack自动生成一个html文件 要把指定的模块里的代码携带者
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: './css/index.css',
}),
],
performance: {
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
},
}
