/* * @Author: your name * @Date: 2021-10-16 21:01:00 * @LastEditTime: 2021-10-19 21:30:06 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /web/scss/webpack.config.js */ // Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const WorkboxWebpackPlugin = require("workbox-webpack-plugin"); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 引入CleanWebpackPlugin插件 const CompressionPlugin = require("compression-webpack-plugin"); const isProduction = process.env.NODE_ENV == "production"; const stylesHandler = MiniCssExtractPlugin.loader; const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin') const config = { entry: "./src/assets/js/index.js", output: { path: path.resolve(__dirname, "dist"), filename: 'js/[name].[contenthash:8].js', //filename: 'myfundations.js', //filename: 'libraryName.js', //library,libraryTarget,fileName输出一个lib，其中library配置输出文件导出的名称，libraryTarget是使用那种模式导出，比如window，this,commonjs,commonjs2,global //library: 'LibraryName', // libraryTarget: 'commonjs' // libraryTarget:'var', //libraryTarget: 'commonjs2' //libraryTarget: 'this', // libraryTarget: 'window' //libraryTarget: 'var' }, devServer: { open: true, host: "localhost", proxy: { '/awx': { changeOrigin: true, //ws: true, // proxy websockets target: "http://apis.map.qq.com/", pathRewrite: { '^/awx': '/' } } } }, plugins: [ new HtmlWebpackPlugin({ template: "index.html", // 压缩HTML minify: { // 移除空白 collapseWhitespace: true, // 移除注释 removeComments: true, // 移除属性中的双引号 removeAttributeQuotes: true }, title: 'index首页', meta: { viewport: 'width=device-width' }, inject: true, // script是否至于body底部 filename: 'index.html', // cache: false, //chunks: ['index'], // 指定加载js文件，默认全部加载 // showErrors: true, // 如果 webpack 编译出现错误，webpack会将错误信 }), new MiniCssExtractPlugin({ filename: 'css/[name]-[hash:10].css' }), new CleanWebpackPlugin(), new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { chainWebpack: config => { config.optimization.splitChunks({ chunks: 'all', cacheGroups: { vendors: { name: 'chunk-vendors', test: /[/]node_modules[/]/, priority: 10, chunks: 'initial' }, iview: { name: 'chunk-iview', priority: 20, test: /[/]node_modules[/]_?iview(.*)/ }, echarts: { name: 'chunk-echarts', priority: 20, test: /[/]node_modules[/]_?echarts(.*)/ }, commons: { name: 'chunk-commons', minChunks: 2, priority: 5, chunks: 'initial', reuseExistingChunk: true } } }) }, alias: { '@': path.resolve(__dirname, 'src'), '@config': path.resolve(__dirname, 'config'), } } }), new CopyWebpackPlugin({ patterns: [{ from: path.resolve(__dirname, './public/*.ico'), to: "./" }, ], }), new CompressionPlugin({ filename: "[path][base].gz", algorithm: 'gzip', test: new RegExp('\\.(js|css)$'), threshold: 10240, minRatio: 0.8 }), new BundleAnalyzerPlugin() // Add your plugins here // Learn more about plugins from https://webpack.js.org/configuration/plugins/ ], module: { noParse: /jquery|lodash/, rules: [{ test: /\.(js|jsx)$/i, //loader: "babel-loader", use: ['thread-loader', 'babel-loader'], exclude: /node_modules/, include: path.resolve(__dirname, './src/assets/js') }, { test: /\.s[ac]ss$/i, use: [stylesHandler, { loader: "css-loader", }, { loader: "postcss-loader", }, { loader: "sass-loader" }], exclude: /node_modules/, include: path.resolve(__dirname, './src/assets/scss') }, { test: /\.css$/i, use: [{ loader: stylesHandler, }, { loader: "css-loader", }, MiniCssExtractPlugin.loader, { loader: "postcss-loader", options: { ident: 'postcss', plugins: () => [ //postcss的插件,帮助postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式 /** * "browserslist": { * // 生产环境的配置：默认情况下是根据生产环境指定配置 "production": [ ">0.2%", "not dead", "not op_mini all" ], // 开发环境的配置 "development": [ //兼容最近一个版本的 Chrome "last 1 chrome version", //兼容最近一个版本的 Firefox "last 1 firefox version", //兼容最近一个版本的Safari "last 1 safari version" ] } */ require('postcss-preset-env')() ] } } ], }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, type: "asset", }, { // 处理html中img资源 test: /\.html$/, loader: 'html-loader', options: { esModule: false, } }, { test: /\.(jpg|png|jpe?g|gif)$/, use: { loader: 'url-loader', options: { limit: 8 * 1024, //限制 8kb 以下使用base64 esMoudle: false, name: '[name]-[hash:10].[ext]', // 打包到/images目录下 outputPath: 'images', exclude: /node_modules/, include: path.resolve(__dirname, './src/assets/images') } } }, { // 处理其他资源 test: /\.(txt|mp3|mp4|mpg|swf|m4a|wap)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ ], }, optimization: { splitChunks: { chunks: 'all', // 表示要分割的chunk类型：initial只处理同步的; async只处理异步的；all都处理 minSize: 0, // 代码分割最小的模块大小，引入的模块大于 30000B 也就是30kb 才做代码分割 maxSize: 30000, // 代码分割最大的模块大小，大于这个值要进行代码分割，一般使用默认值 minChunks: 1, // 引入的次数大于等于1时才进行代码分割 maxAsyncRequests: 6, // 最大的异步请求数量,也就是同时加载的模块最大模块数量 maxInitialRequests: 4, // 入口文件做代码分割最多分成 4 个 js 文件 automaticNameDelimiter: '~', // 文件生成时的连接符 // 缓存分组 cacheGroups: { // 第三方模块 vendors: { name: 'vendors', // chunk名称 test: /node_modules/, // 设置命中目录规则 priority: 1, // 优先级，数值越大，优先级越高 minSize: 0, // 小于这个大小的文件，不分割 minChunks: 1 // 最少复用几次，这里意思是只要用过一次就分割出来 }, // 公共模块 common: { name: 'common', minChunks: 2, priority: 0, minSize: 0, minChunks: 2 // 只要引用过2次，就分割成公共代码 }, // 分割，，既满足 vendors，又满足 default，那么根据优先级会打包到 vendors 组中。 default: { // 没有 test 表明所有的模块都能进入 default 组，但是注意它的优先级较低。 priority: -20, // 根据优先级决定打包到哪个组里,打包到优先级高的组里。 reuseExistingChunk: true // //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块 } }, } }, mode: "production", }; module.exports = () => { if (isProduction) { config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } return config; };