配置webpack具体步骤及其完整配置
var path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var glob = require('glob-all');
var PurifyCSSPlugin = require('purifycss-webpack');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
taotao: './src/index.js',
index: './src/index1.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name][hash:3].bundle.js',
chunkFilename: '[name][hash:3].js',
},
optimization: {
splitChunks: {
cacheGroups: {
common: {
chunks: 'all',
minSize: 1,
name: 'common',
priority: 2,
test: /.js$/
},
}
},
},
module: {
rules: [{
test: /.less$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')()
]
}
},
{ loader: 'less-loader' },
]
},
{
test: /.(jpg|png|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
name: '[name][hash:3].[ext]',
limit: 100,
outputPath: 'img'
}
}, {
loader: 'img-loader',
options: {
plugins: [
require('imagemin-pngquant')({
quality: [0.3, 0.5]
})
]
}
}]
},
{
test: /.html$/,
use: [{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name][hash:3].css',
}),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, './*.html')),
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
],
mode: 'development',
devServer: {
port: "8083",
contentBase: 'dist',
hot: true
}
}
相关知识
园林绿化植物造景及其植物配置研究
城市道路园林植物配置及其分析
[植物配置]植物配置，如此经典
[植物配置]公共场所园林植物配置
植物配置方案
花镜植物配置表
常用观赏草及其在园林中的配置
生态园林中的地被植物及其配置
园林植物配置与造景
园林景观植物配置ppt
网址: 配置webpack具体步骤及其完整配置 https://m.huajiangbk.com/newsview702183.html
| 上一篇: bootstrap |
下一篇: DES加密/解密的应用 |
