您的位置：首页 > Web前端 > JavaScript

七：webpack.config.js文件的高级配置

2017-08-01 15:44 946 查看

一、多个入口文件

之前我们配置的都是一个入口

varwebpack=require('webpack');
varcommonsPlugin=newwebpack.optimize.CommonsChunkPlugin('common.js');

module.exports={

//页面入口文件配置
entry:{
index:'./src/index.js'
},
//入口文件输出配置
output:{

path:path.join(__dirname,"dist/"),
filename:"bundle.js"
}
};

但是有的时候我们需要多个入口文件，这个时候该如何配置？

entry参数支持设置对象，可以设置多个入口文件，这个时候output的filename就不能是固定名字了，因为入口是多个文件，所以同时也要修改output参数：

varwebpack=require('webpack');
varcommonsPlugin=newwebpack.optimize.CommonsChunkPlugin('common.js');

module.exports={

//页面入口文件配置
entry:{
app:['./src/index.js'],
login:['./src/login.js']
},
//入口文件输出配置
output:{

path:path.join(__dirname,"dist/"),
filename:"bundle_[name].js"
}
};

这里的filename:"bundle_[name].js"中的[name]是一个正则表达式匹配的，这里的[name]名字指的是键值对的键，上面的实例中第一个入口文件是app:['./src/index.js']，[name]名字对应的是app而不是index。运行一下webapck命令就会在dist生成bundle_app.js和bundle_login.js两个文件

二、plugins插件

常用Plugins介绍

代码热替换,HotModuleReplacementPlugin

生成html文件，HtmlWebpackPlugin

将css成生文件，而非内联，ExtractTextPlugin

报错但不退出webpack进程，NoErrorsPlugin

代码丑化，UglifyJsPlugin，开发过程中不建议打开

多个html共用一个js文件(chunk)，可用CommonsChunkPlugin

清理文件夹，Clean

调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

1、CommonsChunkPlugin抽取公共资源

　　CommonsChunkPlugin常用参数：

name:与entry中的键对应

filename:公共文件的输出名字

minChunks：公共模块被使用的最小次数。比如配置为3，也就是同一个模块只有被3个以外的页面同时引用时才会被提取出来作为commonchunks。

minSize：作用类似于minChunks，只不过这里控制的文件大小。

项目中可能会使用很多的第三方插件，如果把所有的插件和自己的js文件，打包成一个js文件，这样网页加载会很慢，并且在优化方面完全可以把第三方插件进行单独的缓存。这个时候就需要把所有的第三方插件单独打包为一个js包。CommonsChunkPlugin插件就可以帮助我们实现这个功能。

CommonsChunkPlugin是一个对象，所以使用的时候要进行实例化

newwebpack.optimize.CommonsChunkPlugin('common.js')

CommonsChunkPlugin的参数支持字符串和json

下面我们在webpackDemo中实现CommonsChunkPlugin功能,首先我们通过npm安装jquery和moment第三方插件:

npminstalljquery--save
npminstallmoment--save

接下来在webpack.config.js文件配置CommonsChunkPlugin

varwebpack=require('webpack');
varWebpackDevServer=require("webpack-dev-server");
varpath=require('path');
varCURRENT_PATH=path.resolve(__dirname);//获取到当前目录
varROOT_PATH=path.join(__dirname,'../');//项目根目录
varMODULES_PATH=path.join(ROOT_PATH,'./node_modules');//node包目录
varBUILD_PATH=path.join(ROOT_PATH,'./dist');//最后输出放置公共资源的目录

module.exports={

//项目的文件夹可以直接用文件夹名称默认会找index.js，也可以确定是哪个文件名字
entry:{
app:['./src/index.js'],
login:['./src/login.js'],
vendors:['jquery','moment']//需要打包的第三方插件

},

//输出的文件名,合并以后的js会命名为bundle.js
output:{
path:path.join(__dirname,"dist/"),
publicPath:"http://localhost:8088/dist/",
filename:"bundle_[name].js"
},
devServer:{
historyApiFallback:true,
contentBase:"./",
quiet:false,//控制台中不输出打包的信息
noInfo:false,
hot:true,//开启热点
inline:true,//开启页面自动刷新
lazy:false,//不启动懒加载
progress:true,//显示打包的进度
watchOptions:{
aggregateTimeout:300
},
port:'8088'//设置端口号
},
plugins:[
//newwebpack.HotModuleReplacementPlugin()
//提取公共部分资源
newwebpack.optimize.CommonsChunkPlugin({
//与entry中的vendors对应
name:'vendors',
//输出的公共资源名称
filename:'common.bundle.js',
//对所有entry实行这个规则
minChunks:Infinity
}),
],
devtool:'source-map'

};

index.html

由于进行了公共资源的提取，所以页面上要引入公共部分js文件

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<title>Document</title>
</head>

<body>
<h1id="welcome">welcometo68kejian.com</h1>
<scriptsrc="dist/common.bundle.js"></script>
<scriptsrc="dist/bundle_app.js"></script>
</body>

</html>

index.js

varlogin=require('./login');
var$=require('jquery');//引用jquery模块

$("#welcome").html(login.sayName());

varuserName="68kejian";
module.exports.userName=userName;
module.exports.sayName=function(){
returnuserName;
};

这个时候运行webpack执行命令在dist目录下面就会生成如下js文件:

2、ProvidePlugin全局挂载插件

ProvidePlugin插件主要是进行设置全局模块，比如jquery插件几乎所有的页面都用到，使用require('jquery')引用写起来比较多，这个时候就可以使用ProvidePlugin把jquery设置为全局的，每个页面就可以直接使用了。

plugins:[
//newwebpack.HotModuleReplacementPlugin()
//提取公共部分资源
newwebpack.optimize.CommonsChunkPlugin({
//与entry中的vendors对应
name:'vendors',
//输出的公共资源名称
filename:'common.bundle.js',
//对所有entry实行这个规则
minChunks:Infinity
}),
//把jquery作为全局变量插入到所有的代码中
//然后就可以直接在页面中使用jQuery了
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}),
],

index.js

varlogin=require('./login');
vardata=require('data');

$("#welcome").html(data);

3、自动生成html插件html-webpack-plugin

html-webpack-plugin不是webpack的内置插件所以需要单独安装

npminstallhtml-webpack-plugin--save-dev

html-webpack-plugin插件默认会在打包根目录生成一个index.html页面，通过相关参数可以定义输出名字以及其它的相关配置，下面我们看一下相关的参数：

newHtmlWebpackPlugin({title:'MyApp',//设置title的名字
filename:'admin.html',//设置这个html的文件名
template:'header.html',//要使用的模块的路径
inject:'body',//把模板注入到哪个标签后'body'favicon:'./images/favico.ico',//给html添加一个favicon'./images/favico.ico'minify:true,//是否压缩truefalse
hash:true,//是否hash化truefalse,
cache:false,//是否缓存,
showErrors:false,//是否显示错误,
xhtml:false//是否自动关闭标签默认false
})

下面我们在webpackDemo项目中加入这个插件：

varwebpack=require('webpack');
varWebpackDevServer=require("webpack-dev-server");
varpath=require('path');
varCURRENT_PATH=path.resolve(__dirname);
//获取到当前目录
varROOT_PATH=path.join(__dirname,'../');
//项目根目录
varMODULES_PATH=path.join(ROOT_PATH,'./node_modules');
//node包目录
varBUILD_PATH=path.join(ROOT_PATH,'./dist');
//最后输出放置公共资源的目录
varHtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
//项目的文件夹可以直接用文件夹名称默认会找index.js，也可以确定是哪个文件名字
entry:{
app:['./src/js/index.js'],
vendors:['jquery','moment']
//需要打包的第三方插件
},
//输出的文件名,合并以后的js会命名为bundle.js
output:{
path:path.join(__dirname,"dist/"),
publicPath:"http://localhost:8088/dist/",
filename:"bundle_[name].js"
},
devServer:{
historyApiFallback:true,
contentBase:"./",
quiet:false,//控制台中不输出打包的信息
noInfo:false,
hot:true,//开启热点
inline:true,//开启页面自动刷新
lazy:false,//不启动懒加载
progress:true,//显示打包的进度
watchOptions:{
aggregateTimeout:300
},
port:'8088'//设置端口号
},
plugins:[
newwebpack.HotModuleReplacementPlugin()
//提取公共部分资源
newwebpack.optimize.CommonsChunkPlugin({
//与entry中的vendors对应
name:'vendors',
////输出的公共资源名称
filename:'common.bundle.js',
//对所有entry实行这个规则
minChunks:Infinity
}),
//把jquery作为全局变量插入到所有的代码中
//然后就可以直接在页面中使用jQuery了
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}),
//生成index.html页面
newHtmlWebpackPlugin({
title:'68kejian.com',
filename:'index.html',
template:'header.html',
inject:'body',
favicon:'./images/favico.ico',
minify:false,
hash:true,
cache:false,
showErrors:false
})
],
externals:{
//require('data')isexternalandavailable
//ontheglobalvardata
//'data':'data'
},
devtool:'source-map'
};

header.html

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-type"content="text/html;charset=utf-8"/>
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
</body>
</html>

可以看到htmlWebpackPlugin里面的对象通过<%=htmlWebpackPlugin.options.title%>可以打印到页面里面。

运行webpack命令，就会在dist目录生成了index.html页面

通过截图可以看到html-webpack-plugin会把生成的js文件自动插入到页面中去。

4、提取样式插件extract-text-webpack-plugin

我们知道webpack使用require()方法可以引用css文件和图片，但是由于它们不像js文件准寻CMD格式，所有在使用的时候需要通过加载器进行处理。需要用到两个基本的加载器:css-loader、style.lader,所谓加载器就是一个处理器，它们会把相关的文件处理为webpack可以使用的规范。加载器不是webpack内置，所有需要npm进行安装，同时，extract-text-webpack-plugin也需要单独安装。

npminstallextract-text-webpack-plugin--save-dev
npminstallcss-loaderstyle-loaderless-loader

下面是相关配置：

varwebpack=require('webpack');
varWebpackDevServer=require("webpack-dev-server");
varpath=require('path');
varCURRENT_PATH=path.resolve(__dirname);
//获取到当前目录
varROOT_PATH=path.join(__dirname,'../');
//项目根目录
varMODULES_PATH=path.join(ROOT_PATH,'./node_modules');
//node包目录
varBUILD_PATH=path.join(ROOT_PATH,'./dist');
//最后输出放置公共资源的目录
varHtmlWebpackPlugin=require('html-webpack-plugin');
varExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
//项目的文件夹可以直接用文件夹名称默认会找index.js，也可以确定是哪个文件名字
entry:{
app:['./src/js/index.js'],
vendors:['jquery','moment']
//需要打包的第三方插件
},
//输出的文件名,合并以后的js会命名为bundle.js
output:{
path:path.join(__dirname,"dist/"),
publicPath:"http://localhost:8088/dist/",
filename:"bundle_[name].js"
},
devServer:{
historyApiFallback:true,
contentBase:"./",
quiet:false,//控制台中不输出打包的信息
noInfo:false,
hot:true,//开启热点
inline:true,//开启页面自动刷新
lazy:false,//不启动懒加载
progress:true,//显示打包的进度
watchOptions:{
aggregateTimeout:300
},
port:'8088'//设置端口号},
module:{
loaders:[
//把之前的style&css&lessloader改为
{
test:/\.css$/,
loader:ExtractTextPlugin.extract('style-loader','css-loader'),
exclude:/node_modules/

},{
test:/\.less$/,
loader:ExtractTextPlugin.extract('style','css!less'),
exclude:/node_modules/

},
]
},
plugins:[
newwebpack.HotModuleReplacementPlugin()
//提取公共部分资源
newwebpack.optimize.CommonsChunkPlugin({
//与entry中的vendors对应
name:'vendors',//输出的公共资源名称
filename:'common.bundle.js',
//对所有entry实行这个规则
minChunks:Infinity
}),
//把jquery作为全局变量插入到所有的代码中
//然后就可以直接在页面中使用jQuery了
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}),
//生成index.html页面
newHtmlWebpackPlugin({
title:'68kejian',
filename:'index.html',
template:'header.html',
inject:'body',
favicon:'./images/favico.ico',
minify:false,

hash:true,
cache:false,
showErrors:false
}),
//分离css
newExtractTextPlugin('[name].bundle.css',{
allChunks:true
}),
],
externals:{
//require('data')isexternalandavailable
//ontheglobalvardata
//'data':'data'
},
devtool:'source-map'
};

代码详解：

module:{
loaders:[
//把之前的style&css&lessloader改为
{
test:/\.css$/,
loader:ExtractTextPlugin.extract('style-loader','css-loader'),
exclude:/node_modules/

},{
test:/\.less$/,
loader:ExtractTextPlugin.extract('style','css!less'),
exclude:/node_modules/

},
]
}

module对象用来设置加载器的相关配置，loader就是所有加载器的数组。设置加载器的参数如下：

test:/\.css$/,//文件类型，在整个项目目录
loader:ExtractTextPlugin.extract('style-loader','css-loader'),//使用的加载器
exclude:/node_modules///排除的目录

ExtractTextPlugin插件的使用和其他的一样，引用、实例化然后在plugins配置。执行webpack命令就会把所有的js里面引用的css文件抽取到一个css文件里面。

5、拷贝资源插件copy-webpack-plugin

官方这样解释Copyfilesanddirectoriesinwebpack,在webpack中拷贝文件和文件夹。

需要安装

npminstall--save-devcopy-webpack-plugin