webpack05 多入口文件页面打包配置解析

  • 时间:2018-07-09 22:17 作者:Farmer001 来源:Farmer001 阅读:237
  • 扫一扫,手机访问
摘要:大多数情况,我们用webpack打包单页面应使用,有的时候也会遇到多页面的项目单入口配置一般情况下的配置模板如下:module.exports = { entry: {}, output: {}, module: {}, plugins: [], devServer: {}}entry:配置入口文件

大多数情况,我们用webpack打包单页面应使用,有的时候也会遇到多页面的项目

单入口配置

一般情况下的配置模板如下:

module.exports = {

entry: {},

output: {},

module: {},

plugins: [],

devServer: {}

}

  • entry:配置入口文件的地址,能是单一入口,也能是多入口;
  • output:配置出口文件的地址,支持多出口配置;
  • module:配置板块,主要解析CSS和图片转换压缩等功可以;
  • plugins:配置插件;
  • devServer:配置开发服务功可以;

entry

我们的入口文件一般都是JS文件

entry: {

entry: './src/entery.js'

}

output

output使用来告诉webpack最后打包文件的地址和文件名称

output: {

//打包后的文件路径

path: path.resolve(__dirname, 'dist'),

//打包后的文件名称

filename: 'bundle.js'

}

当然还要引入path板块,这个是nodejs自带的板块;在webpack.config.js文件的头部引入;

const path = require('path');

webpack05 多入口文件页面打包配置解析

打包HTML文件

需要用html-webpack-plugin插件,它会将我们的html模板文件打包,自动生成一个引使用了所有webpack打包的文件的新的html文件:

安装:

npm install html-webpack-plugin --save-dev

  • 1

在配置文件的plugins内加载

var HtmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

var webpackConfig = {

entry: 'index.js',

output: {

path: path.resolve(__dirname, './dist'),

filename: 'index_bundle.js'

},

plugins: [new HtmlWebpackPlugin({

minify:{

removeAttributeQuotes: true,

collapseWhitespace: true

},

template: './src/index.html'

})]

};

这将会产生一个包含以下内容的文件dist/index.html:

webpack App

这样一个最基本的单页面的配置文件如下:

const path = require('path');

module.exports = {

//入口文件的配置项

entry: {

entry: './src/entry.js'

},

//出口文件的配置项

output: {

//输出的路径,使用了Node语法

path: path.resolve(__dirname, 'dist'),

//输出的文件名称

filename: 'bundle.js'

},

//板块:例如解读CSS,图片如何转换,压缩

module: {},

//插件,使用于生产模版和各项功可以

plugins: [new HtmlWebpackPlugin({

minify:{

removeAttributeQuotes: true,

collapseWhitespace: true

},

template: './src/index.html'

})]

//配置webpack开发服务功可以

devServer: {}

}

webpack05 多入口文件页面打包配置解析

多入口配置

多入口配置的时候只要要在entry中多添加一个入口文件

输出文件的时候将filename的值修改为[name].js,作使用是根据入口文件的名称,打包成相同的名称,有几个入口文件,即可以打包出几个出口文件

webpack05 多入口文件页面打包配置解析

同时将定义多个HtmlWebpackPlugin插件,有几个页面就配置几项

module.exports = {

entry: {

client1: './src/client1/client1.js',

client2: './src/client2/client2.js'

},

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'js/[name].bundle.js'

},

plugins: [

new HtmlWebpackPlugin({

title: 'client1',

filename: 'client1.html',

template: 'src/client1/client1.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true

}

}),

new HtmlWebpackPlugin({

title: 'client2',

filename: 'client2.html',

template: 'src/client2/client2.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true

}

})

],

};

#真相来了#

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】学习Web前端想要做到事半功倍,只要掌握好这3点(2019-08-23 10:37)
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部