webpack 4迁移指南
栏目: JavaScript · 发布时间: 5年前
内容简介:webpack 4 出来也已经一年了,公司的老项目用的还是webpack3,也是时候该升级一波了。说实话webpack4还是有几点挺吸引我的,估计也是感受到了parcel的压力,4这个版本内置了很多默认配置。如上,实现了对vue,jsx, js, 和资源文件对处理和转译如上,配置了开发环境的配置,注意webpack4多了一个mode,mode有三个选项可以选择:development, production, 和none,
webpack 4 出来也已经一年了,公司的老项目用的还是webpack3,也是时候该升级一波了。说实话webpack4还是有几点挺吸引我的,估计也是感受到了parcel的压力,4这个版本内置了很多默认配置。
迁移的坑
- CommonsChunkPlugin 废除, webpack 4内置了optimization.splitChunks 和 runtimeChunk 进行代码拆分
- ExtractTextPlugin 不支持webpack4,官方推荐了一个MiniCssExtractPlugin来拆分chunk中的css代码
- vue-loader 的升级,vue-loader 版本由14 升级到了15, 之前的配置也改变了具体参考 从 v14 迁移
基础配置
const package = require('../package.json'); const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const utils = require('./utils'); function resolve (dir) { return path.join(__dirname, dir); } module.exports = { entry: { main: '@/main', 'vender-exten': '@/vendors/vendors.exten.js' }, output: { path: path.resolve(__dirname, '../dist/' + package.version) // 输出文件的绝对路径 }, module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', exclude: /node_modules/, options: { emitError: true, emitWarning: false, failOnError: true } }, { test: /\.vue$/, exclude: /node_modules/, loader: 'vue-loader' }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.js[x]?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: { loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, use: { loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: { loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } } ] }, plugins: [ new VueLoaderPlugin(), ], resolve: { extensions: ['.js', '.vue'], alias: { '@': resolve('../src') } }, externals: { AMap: 'AMap', vue: 'Vue', iview: 'iview', 'vue-router': 'VueRouter', vuex: 'Vuex' } };
如上,实现了对vue,jsx, js, 和资源文件对处理和转译
开发环境配置
const HtmlWebpackPlugin = require("html-webpack-plugin"); const merge = require("webpack-merge"); const webpackBaseConfig = require("./webpack.base.config.js"); const config = require("./config"); const webpack = require("webpack"); module.exports = merge(webpackBaseConfig, { mode: 'development', devtool: '#source-map', output: { publicPath: '/dist/', filename: '[name].js', chunkFilename: '[name].chunk.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'admin management', filename: '../index.html', inject: false }), ], module: { rules: [ { test: /\.css$/, use: ['vue-style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.less$/, use: [ 'vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader' ] } ] }, //设置跨域代理 devServer: { public: 'local.xxxx.net:9000', port: 9000, proxy: { '/login': { target: config.devApi.passport, pathRewrite: { '^/login': '/login' }, changeOrigin: true }, '/v3': { target: config.devApi.sass, pathRewrite: { '^/v3': '/v3' }, changeOrigin: true } } } });
如上,配置了开发环境的配置,注意webpack4多了一个mode,mode有三个选项可以选择:development, production, 和none,
可以看官方的这个图,webpack会根据mode自动开启内置插件
生产环境配置
const HtmlWebpackPlugin = require('html-webpack-plugin') const TerserJSPlugin = require('terser-webpack-plugin'); const webpack = require('webpack') const CopyWebpackPlugin = require('copy-webpack-plugin') const cleanWebpackPlugin = require('clean-webpack-plugin') const merge = require('webpack-merge') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const webpackBaseConfig = require('./webpack.base.config.js') const path = require('path') const package = require('../package.json') module.exports = merge(webpackBaseConfig, { mode: 'production', output: { publicPath: '/' + package.version + '/', // 所有引入的文件资源都加上publicPath路径 filename: '[name].[contenthash].js', // 输出 bundle 的名称, 入口(non-entry) chunkFilename: '[name].[contenthash].chunk.js' // 非入口(non-entry) chunk 文件的名称 }, optimization: { splitChunks: { cacheGroups: { // 缓存组 commons: { test: /[\\/]node_modules[\\/]/, // 只抽取引入的node_modules文件 name: 'vender-exten', // 要缓存的 分隔出来的 chunk 名称 chunks: 'all' // 对所有的chunk都进行缓存 } } }, runtimeChunk: { name: 'runtime' }, minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})] }, module: { rules: [ { test: /\.css?$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', chunkFilename: '[name].[contenthash].css' }), new cleanWebpackPlugin(['dist/*'], { root: path.resolve(__dirname, '../') }), new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: '../static', ignore: ['.*'] } ]), new HtmlWebpackPlugin({ title: 'admin', favicon: './static/favicon.ico', filename: '../index.html', template: '!!ejs-loader!./src/template/index.ejs', inject: false }) ] });
生产环境
1.使用MiniCssExtractPlugin,来拆分css,我可以可以options里面有两个值filename和chunkFilename, filename指的是entry中key生成的css名称, chunkFilename是webpack中每个chunk拆分生成css的名称。
2.使用OptimizeCSSAssetsPlugin 对打包之后的css文件进行压缩,
3.使用splitChunks对公共代码进行抽取缓存,我们先来看一下这个插件的默认配置
module.exports = { optimization: { splitChunks: { chunks: 'async', "initial" | "all"(推荐) | "async" (默认就是async) minSize: 30000, 最小尺寸,30000 maxSize: 0, 最小尺寸 minChunks: 1, 最小 chunk ,默认1 maxAsyncRequests: 5, // 最大异步请求数, 默认5 maxInitialRequests: 3, // 最大初始化请求书,默认3 automaticNameDelimiter: '~', // 打包分隔符 name: true, cacheGroups: { // 重点,缓存配置 vendors: { test: /[\\/]node_modules[\\/]/, // 只缓存node_modules里面的模块 priority: -10 // // 缓存组优先级,可能有多个 }, } } } };
看下我的配置
splitChunks: { cacheGroups: { // 缓存组 commons: { test: /[\\/]node_modules[\\/]/, // 只抽取引入的node_modules文件 name: 'vender-exten', // 要缓存的 分隔出来的 chunk 名称 chunks: 'all' // 对所有的chunk都进行缓存 } } }
通过webpack-bundle-analyzer生成的可视化图标分析查看项目中的多个chunk共同引入的lib包
抽离5个依赖的lib包,进行缓存<br/><br/>
4.使用optimization.runtimeChunk,去缓存生成chunk过程中生成的webpack公用代码<br/><br/>
5.使用TerserJSPlugin对js进行压缩
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- webpack 4迁移指南
- SVN 迁移至 Git 指南
- 神经风格迁移指南(第一部分)
- Gradle Kotlin DSL迁移指南
- Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
- Spring Cloud Alibaba迁移指南1:零代码从Eureka迁移到Nacos 原 荐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
智能家居:商业模式+案例分析+应用实战
陈国嘉 / 人民邮电出版社 / 2016-4 / 49.80元
作为万物互联的关键一环,智能家居的出现和普及已经势不可当,以移动互联网为核心的新技术正在重构智能家居。只有成为智能家居行业的先行者,才能抢占“风口”。 《智能家居:商业模式+案例分析+应用实战》紧扣“智能家居”,从3个方面进行专业、深层次的讲解。首要方面是基础篇,从智能家居的发展现状、产业链、商业分析、抢占入口等方面进行阐述,让读者对智能家居有个初步的认识;第二个方面是技术篇,从智能家居的控......一起来看看 《智能家居:商业模式+案例分析+应用实战》 这本书的介绍吧!