vue-cli 3.x 已经没有了webpack.config.js文件。取而代之的是创建一个vue.config.js文件。官网是这样介绍的

vue.config.js

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
//用于生产环境去除多余的css
const PurgecssPlugin = require("purgecss-webpack-plugin");
//全局文件路径
const glob = require("glob-all");
//压缩代码并去掉console
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
//代码打包zip
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
// 废弃baseUrl 一般运维会配置好的
publicPath: process.env.NODE_ENV === "production" ? "/configtest/" : "/",
//打包的输出目录
outputDir: "dist/configtest",
//保存是校验
lintOnSave: true,
//如果文件等设置
pages: {
index: {
entry: "src/main.js",
template: "public/index.html",
filename: "index.html"
}
},
//静态资源打包路径
assetsDir: "static",
//默认false 可以加快打包
productionSourceMap: false,
//打包后的启动文件
indexPath: "congfigtest.html",
//打包文件是否使用hash
filenameHashing: true,
runtimeCompiler: false,
transpileDependencies: [],
//打包的css路径及命名
css: {
modules: false,
//vue 文件中修改css 不生效 注释掉 extract:true
extract: {
filename: "style/[name].[hash:8].css",
chunkFilename: "style/[name].[hash:8].css"
},
sourceMap: false,
loaderOptions: {
css: {},
less: {
// 向全局less样式传入共享的全局变量
// data: `@import "~assets/less/variables.less";$src: "${process.env.VUE_APP_SRC}";`
},
// postcss 设置
postcss: {
plugins: [
require("postcss-px-to-viewport")({
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: "vw", // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
})
]
}
}
},
//webpack 链式配置 默认已经配置好了 node_moudles/@vue
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
// 修复Lazy loading routes 按需加载的问题,如果没有配置按需加载不需要写,会报错
// config.plugin("html").tap(args => {
// args[0].chunksSortMode = "none";
// return args;
// });
//添加别名
config.resolve.alias
.set("@", resolve("src"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"))
.set("layout", resolve("src/layout"))
.set("base", resolve("src/base"))
.set("static", resolve("src/static"));
// 压缩图片
config.module
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: "65-90", speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75 }
});
},
//webpack 配置
configureWebpack: config => {
const plugins = [];
//去掉不用的css 多余的css
plugins.push(
new PurgecssPlugin({
paths: glob.sync([path.join(__dirname, "./**/*.vue")]),
extractors: [
{
extractor: class Extractor {
static extract(content) {
const validSection = content.replace(
/<style([\s\S]*?)<\/style>+/gim,
""
);
return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
}
},
extensions: ["html", "vue"]
}
],
whitelist: ["html", "body"],
whitelistPatterns: [/el-.*/],
whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
})
);
//启用代码压缩
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: false,
pure_funcs: ["console.log"] //移除console
}
},
sourceMap: false,
parallel: true
})
),
//代码压缩打包
plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
);
config.plugins = [...config.plugins, ...plugins];
},
parallel: require("os").cpus().length > 1,
pluginOptions: {},
pwa: {},
//设置代理
devServer: {
port: 8080,
host: "0.0.0.0",
https: false,
open: true,
openPage: "about",
hot: true,
disableHostCheck: true,
proxy: {
"/api": {
target: "https://cdn.awenliang.cn",
ws: true,
changeOrigin: true
},
"/foo": {
target: "https://cdn.awenliang.cn",
ws: true,
changeOrigin: true
}
}
}
};

  babel.config.js

//npm i --save-dev babel-plugin-transform-remove-console
const plugins = [];
// if(['production', 'prod'].includes(process.env.NODE_ENV)) {
// plugins.push("transform-remove-console")
// } module.exports = {
presets: [["@vue/app", { useBuiltIns: "entry" }]],
plugins: plugins
};

  postcss.config.js

const autoprefixer = require("autoprefixer");
let plugins = [];
module.exports = {
plugins: [...plugins, autoprefixer]
};

  

vue-cli 3.x 构建项目,webpack没有了?的更多相关文章

  1. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  2. Vue Cli 3:创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

  3. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  4. vue --- cli build 后的项目,图片路径出错

    今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...

  5. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  6. 使用Vue CLI 3快速创建项目

    首先 vue create ant-design-vue-pro 执行命令会显示两个选项,1默认,2自定义 我么选择自定义 选择好自定义的插件回车就等待下安装成功然后进入项目文件夹 cd ant-de ...

  7. Vue CLI图形化创建项目

  8. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  9. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  10. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

随机推荐

  1. sql 183. 从不订购的客户

    SQL架构 某网站包含两个表,Customers 表和 Orders 表.编写一个 SQL 查询,找出所有从不订购任何东西的客户. Customers 表: +----+-------+ | Id | ...

  2. 关于JavaScript的事件绑定

    js事件绑定的几种方式 JavaScript中有三种常用的绑定事件方法: 1. 在DOM元素中直接绑定: 2. 在JavaScript代码中绑定: 3. 绑定事件佳妮婷函数. 一.在DOM元素中直接绑 ...

  3. k8s安装flannel报错“node "master" pod cidr not assigned”

    一.在安装flannel网络插件后,发现pod: kube-flannel-ds 一直是CrashLoopBackOff 此报错是因为安装Kubeadm Init的时候,没有增加 --pod-netw ...

  4. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

  5. java中简单的反射

    1.为什么会用到反射机制? 最近需要写定时服务,如果一个一个去写定时服务的话,后期维护是很烦人的,通过反射机制,我们就可以将定时服务的信息通过数据配置来实现,这样我们后期就可以将整个模块交给运维人员去 ...

  6. VirtualBox:无法访问共享文件夹

    造冰箱的大熊猫@cnblogs 2019/5/9 问题:VirtualBox中安装Linux虚拟机,设置宿主机某个文件夹为虚拟机的共享文件夹.在虚拟机中,该共享文件夹显示为“sf_×××”,打开该文件 ...

  7. JavaWeb_(Hibernate框架)Hibernate中一级缓存

    Hibernate中一级缓存 Hibernate 中的缓存分为一级缓存和二级缓存,这两个级别的缓存都位于持久化层,并且存储的都是数据库数据的备份.其中一级缓存是 Hibernate 的内置缓存,在前面 ...

  8. 0.JQuery学习

    jQuery 教程 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中 ...

  9. truncate at 255 characters with xlsx files(OLEDB方式读取Excel丢失数据、字符串截断的原因和解决方法)

    The TypeGuessRows setting is supported by ACE. Note the version numbers in the key may change depend ...

  10. onReachBottom 注意事项

    onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReac ...