webpack里脚手架优化的实现方法

这次给大家带来webpack里脚手架优化的实现方法，webpack里脚手架优化的注意事项有哪些，下面就是实战案例，一起来看一下。

在之前的文章中了解了webpack v4的特性，现在将知识用于实践，对之前写的一个react脚手架进行打包性能的优化。

优化类目

样式分离

第三方资源分离

区分开发环境

热更新

提取公共代码

1. CSS分离

npm install extract-text-webpack-plugin -D

登录后复制

webpack.config.js

将css、less、sass文件单独从打包文件中分离

+ let cssExtract = new ExtractTextWebpackPlugin({+ filename: 'css.css',+ allChunks: true+ });+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')+ let lessExtract = new ExtractTextWebpackPlugin('less.css')

登录后复制

在webpack.config.js中单独添加规则，

test：匹配处理文件的扩展名的正则表达式

include/exclude手动指定必须处理的文件夹或屏蔽不需要处理的文件夹

{ test: /.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ['css-loader?minimize','postcss-loader'], publicPath: "/dist" }), include:path.join(dirname,'./src'), exclude:/node_modules/},{ test: /.scss$/, use: sassExtract.extract({ fallback: "style-loader", use: ["css-loader?minimize","sass-loader"], publicPath: "/dist" }), include:path.join(dirname,'./src'), exclude:/node_modules/},{ test: /.less$/, loader: lessExtract.extract({ use: ["css-loader?minimize", "less-loader"] }), include:path.join(dirname,'./src'), exclude:/node_modules/},

登录后复制

然后运行webpack命令时报错

compilation.mainTemplate.applyPluginsWaterfall is not a function

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

研究得出结论：webpack升级到v4然而响应的插件没有升级的原故。

解决方法：安装指定版本的依赖

"html-webpack-plugin": "^3.0.4""extract-text-webpack-plugin": "^4.0.0-beta.0"

登录后复制

resolve

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: { //引入模块的时候，可以不用扩展名 extensions: [".js", ".less", ".json"], alias: {//别名 "bootstrap": "bootstrap/dist/css/bootstrap.css" }}

登录后复制

监听文件修改

webpack模式下使用，webpack-dev-server模式不用，可以将watch改为false

watchOptions: { ignored: /node_modules/, aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作，防止文件更新太快导致编译频率太高 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化，默认每秒询问1000次}

登录后复制

提取公共代码

optimization: { splitChunks: { cacheGroups: { commons: {  chunks: "initial",  minChunks: 2,  maxInitialRequests: 5, // The default limit is too small to showcase the effect  minSize: 0 // This is example is too small to create commons chunks }, vendor: {  test: /node_modules/,  chunks: "initial",  name: "vendor",  priority: 10,  enforce: true } } } }

登录后复制

分离react react-dom ant公共代码

方法一：externals

在页面上引入第三方资源库，然后使用externals防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源, }

登录后复制

方法二：DLL

DLL在上篇文章中写过，但是打包后一直出现

后来才发现是页面上没有引入资源。。。。（我一直以为会webpack自动生成在页面上….）

在index.html文件中引入

登录后复制

分离成功！上代码

webpack.base.js

var path = require('path');var webpack = require('webpack');var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const CleanWebpackPlugin = require('clean-webpack-plugin');const CopyWebpackPlugin = require('copy-webpack-plugin')let cssExtract = new ExtractTextWebpackPlugin({ filename: 'css.css', allChunks: true});let sassExtract = new ExtractTextWebpackPlugin('sass.css')let lessExtract = new ExtractTextWebpackPlugin('less.css')module.exports = { entry:'./src/index.js', output: { path: path.resolve(dirname, './dist'), filename: 'bundle.[hash:8].js', publicPath: '' }, resolve: { //引入模块的时候，可以不用扩展名 extensions: [".js", ".less", ".json"], alias: {//别名 "bootstrap": "bootstrap/dist/css/bootstrap.css" }, modules: [path.resolve(dirname, 'node_modules')] },/* externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源 //'antd': 'antd', },*/ devtool: 'source-map', devServer: { contentBase:path.resolve(dirname,'dist'), publicPath: '/', port: 8080, hot:true, compress:true, historyApiFallback: true, inline: true }, watch: false, //只有在开启监听模式时，watchOptions才有意义 watchOptions: { ignored: /node_modules/, aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作，防止文件更新太快导致编译频率太高 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化，默认每秒询问1000次 }, optimization: { splitChunks: { cacheGroups: { commons: {  chunks: "initial",  minChunks: 2,  maxInitialRequests: 5, // The default limit is too small to showcase the effect  minSize: 0 // This is example is too small to create commons chunks }, vendor: {  test: /node_modules/,  chunks: "initial",  name: "vendor",  priority: 10,  enforce: true } } } }, module: { rules:[ { test: /.js$/, use: {  loader:'babel-loader',  options: {  presets: ['env','es2015', 'react'],  } }, include:path.join(dirname,'./src'), exclude:/node_modules/ }, { test: /.css$/, use: cssExtract.extract({  fallback: "style-loader",  use: ['css-loader?minimize','postcss-loader'],  publicPath: "/dist" }), include:path.join(dirname,'./src'), exclude:/node_modules/ }, { test: /.scss$/, use: sassExtract.extract({  fallback: "style-loader",  use: ["css-loader?minimize","sass-loader"],  publicPath: "/dist" }), include:path.join(dirname,'./src'), exclude:/node_modules/ }, { test: /.less$/, loader: lessExtract.extract({  use: ["css-loader?minimize", "less-loader"] }), include:path.join(dirname,'./src'), exclude:/node_modules/ }, { test: /.(html|htm)/, use: 'html-withimg-loader' }, { test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/, use: {  loader:'url-loader',  options:{  limit: 5 * 1024,  //指定拷贝文件的输出目录  outputPath: 'images/'  } } } ] }, plugins: [ //定义环境变量 new webpack.DefinePlugin({ development: JSON.stringify(process.env.NODE_ENV) }), new CleanWebpackPlugin(['dist']), cssExtract, lessExtract, sassExtract, new HtmlWebpackPlugin({ title: 'React Biolerplate by YuanYuan', template: './src/index.html', filename: `index.html`, hash: true }), new webpack.DllReferencePlugin({ manifest: path.join(dirname, 'vendor', 'react.manifest.json') }), new CopyWebpackPlugin([{ from: path.join(dirname,'vendor'),//静态资源目录源地址 to:'./vendor' //目标地址，相对于output的path目录 }]),/* new webpack.optimize.CommonsChunkPlugin({ name: 'common' // 指定公共 bundle 的名称。 + })*/ new webpack.HotModuleReplacementPlugin(), // 热替换插件 new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字 ]};

登录后复制

webpack.config.js

const path = require('path');const webpack = require('webpack');const merge = require('webpack-merge');//用来合并配置文件const base = require('./webpack.base');let other = '';//console.log(process.env.NODE_ENV )if (process.env.NODE_ENV == 'development') { other = require('./webpack.dev.config');} else { other = require('./webpack.prod.config');}//console.log(merge(base, other));module.exports = merge(base, other);webpack.prod.config.jsconst path = require('path');const webpack = require('webpack');const UglifyJSPlugin = require('uglifyjs-webpack-plugin')module.exports = { output: { filename: 'bundle.min.js', }, plugins: [ new UglifyJSPlugin({sourceMap: true}) ]}

登录后复制

原脚手架地址

优化后手架地址

打包速度优化，打包文件细化，改造成功~

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

Vue项目应该怎么分环境打包

在React里使用Vuex的具体步骤

以上就是webpack里脚手架优化的实现方法的详细内容，更多请关注【创想鸟】其它相关文章！