|
|
@@ -1,127 +1,39 @@
|
|
|
-"use strict";
|
|
|
-const path = require("path");
|
|
|
-// 代码压缩
|
|
|
-const TerserPlugin = require('terser-webpack-plugin')
|
|
|
-// gzip压缩
|
|
|
-const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
|
|
-// 是否为生产环境
|
|
|
-const isProduction = process.env.NODE_ENV !== 'development'
|
|
|
-
|
|
|
-
|
|
|
-function resolve (dir) {
|
|
|
- return path.join(__dirname, dir);
|
|
|
-}
|
|
|
-
|
|
|
-console.log(process.env)
|
|
|
+/**
|
|
|
+ *@desc webpack配置文件
|
|
|
+ */
|
|
|
+// const path = require('path')
|
|
|
+// const resolve = dir => {
|
|
|
+// return path.join(__dirname, dir)
|
|
|
+// }
|
|
|
|
|
|
module.exports = {
|
|
|
- productionSourceMap: false,
|
|
|
- lintOnSave: false,
|
|
|
- configureWebpack: {
|
|
|
- output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
|
|
|
- filename: `[name].${new Date().getTime()}.js`,
|
|
|
- chunkFilename: `[name].${new Date().getTime()}.js`
|
|
|
- }
|
|
|
- },
|
|
|
- chainWebpack: config => {
|
|
|
- // 使用svg-sprite-loader加载icon图标
|
|
|
- config.module
|
|
|
- .rule("svg")
|
|
|
- .exclude.add(resolve("src/icons"))
|
|
|
- .end();
|
|
|
- config.module
|
|
|
- .rule("icons")
|
|
|
- .test(/\.svg$/)
|
|
|
- .include.add(resolve("src/icons"))
|
|
|
- .end()
|
|
|
- .use("svg-sprite-loader")
|
|
|
- .loader("svg-sprite-loader")
|
|
|
- .options({
|
|
|
- symbolId: "icon-[name]"
|
|
|
- })
|
|
|
- .end();
|
|
|
- // 图片压缩
|
|
|
- if (isProduction) {
|
|
|
- // 删除预加载
|
|
|
- config.plugins.delete('preload');
|
|
|
- config.plugins.delete('prefetch');
|
|
|
- // 压缩代码
|
|
|
- config.optimization.minimize(true);
|
|
|
- // 分割代码
|
|
|
- config.optimization.splitChunks({
|
|
|
- chunks: 'all'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- configureWebpack: config => {
|
|
|
- // 生产环境相关配置
|
|
|
- if (isProduction) {
|
|
|
- // 代码压缩
|
|
|
- config.plugins.push(
|
|
|
- new TerserPlugin({
|
|
|
- terserOptions: {
|
|
|
- //生产环境自动删除console
|
|
|
- compress: {
|
|
|
- warnings: false, // 若打包错误，则注释这行
|
|
|
- drop_debugger: true,
|
|
|
- drop_console: true,
|
|
|
- pure_funcs: ['console.log']
|
|
|
- }
|
|
|
- },
|
|
|
- sourceMap: false,
|
|
|
- parallel: true
|
|
|
- })
|
|
|
- )
|
|
|
-
|
|
|
- // gzip压缩
|
|
|
- const productionGzipExtensions = ['html', 'js', 'css']
|
|
|
- config.plugins.push(
|
|
|
- new CompressionWebpackPlugin({
|
|
|
- filename: '[path].gz[query]',
|
|
|
- algorithm: 'gzip',
|
|
|
- test: new RegExp(
|
|
|
- '\\.(' + productionGzipExtensions.join('|') + ')$'
|
|
|
- ),
|
|
|
- threshold: 10240, // 只有大小大于该值的资源会被处理 10240
|
|
|
- minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
|
|
|
- deleteOriginalAssets: false // 删除原文件
|
|
|
- })
|
|
|
- )
|
|
|
-
|
|
|
- // 公共代码抽离
|
|
|
- config.optimization = {
|
|
|
- splitChunks: {
|
|
|
- cacheGroups: {
|
|
|
- vendor: {
|
|
|
- chunks: 'all',
|
|
|
- test: /node_modules/,
|
|
|
- name: 'vendor',
|
|
|
- minChunks: 1,
|
|
|
- maxInitialRequests: 5,
|
|
|
- minSize: 0,
|
|
|
- priority: 100
|
|
|
- },
|
|
|
- common: {
|
|
|
- chunks: 'all',
|
|
|
- test: /[\\/]src[\\/]js[\\/]/,
|
|
|
- name: 'common',
|
|
|
- minChunks: 2,
|
|
|
- maxInitialRequests: 5,
|
|
|
- minSize: 0,
|
|
|
- priority: 60
|
|
|
- },
|
|
|
- styles: {
|
|
|
- name: 'styles',
|
|
|
- test: /\.(sa|sc|c)ss$/,
|
|
|
- chunks: 'all',
|
|
|
- enforce: true
|
|
|
- },
|
|
|
- runtimeChunk: {
|
|
|
- name: 'manifest'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ runtimeCompiler: true,
|
|
|
+ // // 放置静态资源的地方 (js/css/img/font/...)
|
|
|
+ // assetsDir: 'static',
|
|
|
+
|
|
|
+ // // 是否为生产环境构建生成 source map？
|
|
|
+ // productionSourceMap: false,
|
|
|
+
|
|
|
+ // // 配置 webpack-dev-server 行为。
|
|
|
+ // devServer: {
|
|
|
+ // open: true
|
|
|
+ // },
|
|
|
+ // publicPath: './',
|
|
|
+
|
|
|
+ // // 将构建好的文件输出到哪里
|
|
|
+ // outputDir: 'dist',
|
|
|
+ // chainWebpack: config => {
|
|
|
+ // config.resolve.alias
|
|
|
+ // .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
|
|
|
+ // // .set('_c', resolve('src/components'))
|
|
|
+ // // .set('_conf', resolve('src/config'))
|
|
|
+ // },
|
|
|
+
|
|
|
+ // pluginOptions: {
|
|
|
+ // 'style-resources-loader': {
|
|
|
+ // preProcessor: 'less',
|
|
|
+ // patterns: [path.resolve(__dirname, './src/assets/css/variable.less')]
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
-};
|
|
|
+
|
aaa