nginx的缓存配置就不写了 直接上webpack的
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
process.env.NODE_ENV = 'development'
module.exports = {
target: process.env.NODE_ENV == 'development' ? 'web' : 'browserslist',
// mode: "production",
mode: "development",
entry: ['./src/index.js', './src/index.html'],
devtool: 'eval-source-map',
devServer: {
contentBase: './dist',
compress: true,
open: false,
hot: true
},
output: {
publicPath: '/',
// 指定打包后输出的文件名
filename: 'js/app.[contenthash:10].js',
// 指定打包后输出的目录
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
"@": path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
// 匹配 [.html] 文件
test: /\.html$/,
// 符合的文件使用以下loader进行解析
use: ['html-loader']
},
{
// 匹配 [.css] 文件
test: /\.css$/,
// 符合的文件使用以下loader进行解析
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require("postcss-preset-env")(),
require("cssnano")()
]
}
}
},
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
name: 'images/[name].[contenthash:10].[ext]',
limit: 1024 * 9,
esModule: false
}
},
]
},
{
include: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "fonts"
}
}
]
},
{
exclude: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|svg|css|html|js)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash:10].[ext]',
}
}],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// https://www.babeljs.cn/docs/babel-preset-env#corejs
"targets": {
"ie": 7,
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"useBuiltIns": "usage",
"corejs": "3.8.3",
}
]
],
cacheDirectory: true
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.BannerPlugin({
banner: "bugfix2019 版权所有"
}),
new HtmlWebpackPlugin({
title: '王二狗',
template: "src/index.html",
favicon: "src/assets/images/favicon.ico",
}),
new MiniCssExtractPlugin(
{ filename: 'css/app.[contenthash].css' }
),
new ESLintPlugin({
fix: true,
extensions: ['js', 'json', 'coffee'],
exclude: '/node_modules/'
}),
]
};