const path = require('path'); const CompressionPlugin = require('compression-webpack-plugin'); //Gzip const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器 const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制 const webpack = require('webpack'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { //vue-cli3.3+新版本使用 publicPath: '/', //输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 assetsDir: 'static', //以多页模式构建应用程序。 pages: undefined, //是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler: false, //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建,在适当的时候开启几个子进程去并发的执行压缩 parallel: require('os').cpus().length > 1, //生产环境是否生成 sourceMap 文件,一般情况不建议打开 productionSourceMap: false, // webpack配置 //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: config => { /** * 删除懒加载模块的prefetch,降低带宽压力 * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch * 而且预渲染时生成的prefetch标签是modern版本的,低版本浏览器是不需要的 */ // config.plugins.delete('prefetch'); // config.plugins.delete('preload'); // config.resolve.symlinks(true); config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, {limit: 102400})); config.resolve.alias .set('@assets', resolve('src/assets')) .set('@components-mobile', resolve('src/components/Mobile')) .set('@views-mobile', resolve('src/views/Mobile')) .set('@components-PC', resolve('src/components/PC')) .set('@views-PC', resolve('src/views/PC')); if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development' } else { // 为开发环境修改配置... } return config; }, //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F configureWebpack: config => { //生产and测试环境 let pluginsPro = [ new CompressionPlugin({ //文件开启Gzip,也可以通过服务端(如:nginx)(https://github.com/webpack-contrib/compression-webpack-plugin) filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$',), threshold: 8192, minRatio: 0.8, }), //Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer) new BundleAnalyzerPlugin(), //优化moment打包过大 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) ]; //开发环境 let pluginsDev = [ //Webpack包文件分析器 new BundleAnalyzerPlugin(), //优化moment打包过大 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) ]; // 为生产环境修改配置...process.env.NODE_ENV !== 'development' if (process.env.NODE_ENV === 'production') { config.plugins = [...config.plugins, ...pluginsPro]; } else { // 为开发环境修改配置... config.plugins = [...config.plugins, ...pluginsDev]; } }, css: { //12月更新 //modules: false, //css.module已弃用 requireModuleExtension: true, extract: process.env.NODE_ENV === "production", sourceMap: false, // css预设器配置项 loaderOptions: { sass: { //设置css中引用文件的路径,引入通用使用的scss文件(如包含的@mixin) prependData: `$baseUrl: "/"; @import '@/assets/scss/var.scss'; `, sassOptions: { outputStyle: 'expanded' } } } }, // webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/ devServer: { // host: 'localhost', host: "0.0.0.0", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 hotOnly: true, // 热更新 proxy: { "^/api/*": { target: "http://127.0.0.1:8081/", changeOrigin: true, secure: true }, } }, // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader pluginOptions: { 'style-resources-loader': {//https://github.com/yenshih/style-resources-loader preProcessor: 'scss',//声明类型 'patterns': [ path.resolve(__dirname, './src/assets/scss/var.scss'), ], } } };
该版本文件须配合SASS 8.0使用。
声明:
本文采用
BY-NC-SA
协议进行授权,如无注明均为原创,转载请注明转自
凤曦的小窝
本文地址: 一份常用的vue-cli生成工程配置
本文地址: 一份常用的vue-cli生成工程配置