const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 定义nodejs环境变量:决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production'; // 复用loader
const commonCssLoader = [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/',
}
},
{
loader: 'css-loader'
},
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
] module.exports = {
entry: "./src/js/index.js",
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// 在package.json中eslintConfig --> airbnb
test: /\.js/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
use: [
{
loader: 'eslint-loader',
options: {
// 自动修复eslint的错误
fix: true
}
}
]
},
{
oneOf: [
// 以下loader只会匹配一个
// 注意:不能有两个配置处理同一种类型文件
{
test: /\.css$/,
use: [
// 'style-loader',
...commonCssLoader
]
},
{
test: /\.less$/,
use: [
...commonCssLoader,
'less-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[hash:10].[ext]',
limit: 8 * 1024,
esModule: false,
outputPath: 'imgs'
}
}
],
},
{
exclude: /\.(js|html|css|less|jpg|png|gif)/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
], },
{
test: /\.html$/,
use: ['html-loader']
},
/*
正常来讲,一个文件只能被一个loader处理。
当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序:
先执行eslint 在执行babel
*/
{
test: /\.js/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'production'
}

23.oneOf的更多相关文章

  1. Java开发中的23种设计模式详解

    [放弃了原文访问者模式的Demo,自己写了一个新使用场景的Demo,加上了自己的理解] [源码地址:https://github.com/leon66666/DesignPattern] 一.设计模式 ...

  2. ILJMALL project过程中遇到Fragment嵌套问题:IllegalArgumentException: Binary XML file line #23: Duplicate id

    出现场景:当点击"分类"再返回"首页"时,发生error退出   BUG描述:Caused by: java.lang.IllegalArgumentExcep ...

  3. CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator

    CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator 我还没有用过Compute Shader,所以现在把红宝书里的例子拿来了,加入CSharpGL中. ...

  4. ABP(现代ASP.NET样板开发框架)系列之23、ABP展现层——异常处理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之23.ABP展现层——异常处理 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  5. Java开发中的23种设计模式详解(转)

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  6. C#得到某月最后一天晚上23:59:59和某月第一天00:00:00

    项目需求: 某学校订单截止操作时间的上一个月最后一天晚上23:59:59 为止所有支付的订单统计: 代码: /// <summary> /// 通过学校和截止时间得到订单 /// < ...

  7. C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试

    在上篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及对应的对象模型,本篇继续微信小店的主题,介绍其中API接口的封装和测试使用.微信小店的相 ...

  8. [转载]IIS7报500.23错误的解决方法

    原文出处: 原文作者:pizibaidu 原文链接:http://pizibaidu.blog.51cto.com/1361909/1794446 背景:今天公司终端上有一个功能打开异常,报500错误 ...

  9. [MySQL Reference Manual] 23 Performance Schema结构

    23 MySQL Performance Schema 23 MySQL Performance Schema 23.1 性能框架快速启动 23.2 性能框架配置 23.2.1 性能框架编译时配置 2 ...

  10. Error:failed to find Build Tools revision 23.0.0 rc3

    解决,选择AS里有的版本就可以了,已有的我这就一个23.0.3,导入的项目是23.0.2 Donate:)

随机推荐

  1. spring java枚举转json 方便前端取值

    未处理前: "gender":"GenderEnum.FEMALE(code=2, gender=女)" 解决方法:使用jackson提供的注解 @JsonFo ...

  2. web api appsettings.json 数据库连接

    编辑AppSettings.Json "ConnectionStrings": { "DefaultConnection": "Data Source ...

  3. MarkDown使用规范

    写博客的简单语法. 标题语法 一级标题:# 标题内容 二级标题:## +标题内容 三级标题:### +标题内容 后续标题语法依次增加# 注:#号后有空格 MarkDown最高支持六级标题. 字体语法 ...

  4. Windows安装使用Chocolatey 包软件管理(类似 rpm , yum, brew , apt-get 包管理器工具)

    Windows也能像Linux或者Mac那样命令行安装管理软件了,,,真的太方便了 下载安装 使用window powershell 用管理员运行 Set-ExecutionPolicy Bypass ...

  5. 使用python制作nRF52832升级包和合成烧录文件的经验(nRF52832 DFU经验分享)

    使用python制作nRF52832升级包和合成烧录文件,青风开发板的作者已经说得很明白,不过作者使用的python是2.7的,已经很落后了.目前python已经更新到3.10.4了.所以我换了台电脑 ...

  6. pip install keras==2.0.3 -i https://pypi.tuna.tsinghua.edu.cn/simple

    pip install keras==2.0.3 -i https://pypi.tuna.tsinghua.edu.cn/simple

  7. JSP基础语法笔记一

    JSP是一种脚本语言. 代码片段,方法内容: <% 代码片段 %> <jsp:scriptlet> 代码片段 </jsp:scriptlet> 设置编码格式,正常显 ...

  8. enobj.cn站有更新

    1:整体样式 2:可以折叠app列表 3:手机端样式 4: Blog链接到博客园

  9. flask - fastapi (python 异步API 框架 可以自动生成swagger 文档) 常用示例 以及整合euraka nacos

    flask - fastapi    (python 异步API 框架  可以自动生成swagger 文档)  常用示例: 之前使用 flask 需要手动写文档, 这个可以自动生成, fastapi ...

  10. 从零开始学Java系列之如何使用记事本编写java程序

    前言 在上一篇文章中,壹哥给大家介绍了Java中的标识符及其命名规则.规范,Java里的关键字和保留字,以及Java中的编码规范. 我们在之前编写案例时,使用的开发工具都是windows自带的txt记 ...