这次给大家带来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)。
<script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script>
externals: { 'react': 'react', 'react-dom': 'reactdom', // 提出ant design的公共资源, }
方法二：dll
dll在上篇文章中写过，但是打包后一直出现
后来才发现是页面上没有引入资源。。。。（我一直以为会webpack自动生成在页面上....）
在index.html文件中引入
<script src="./vendor/react.dll.js"></script>
分离成功！上代码
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.js
const 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+axios制作登录请求拦截
webpack v4的使用详解
以上就是webpack脚手架使用优化的详细内容。