webpack打包多页面配置

原创 2018年04月16日 22:36:04


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');   //用于生成html文件
// import htmlWebpackPlugin from 'html-webpack-plugin.js'


module.exports = {
entry : {  //文件入口
'demo' : './src/main.js',
// 'demo_2' : './src/main_1.js',
'a' : './src/a.js',
'b' : './src/b.js',
},     
output : {   //打包后的文件出口
filename : 'js/[name]_[hash].bundle.js',   //打包后的文件的名字
path : path.resolve(__dirname,'dist'),    //打包后文件的存放位置
// publicPath : 'https://localhost:8080'
},
plugins : [   //打包成多个HTML文件   new HtmlWebpackPlugin()一下,就有一个HTML
new HtmlWebpackPlugin({
template: './index.html',   //HTML模板
filename : 'a.html',   //打包生成的html名字 
title : ' 我的网页',
inject : 'body',  //打包后的js在哪引入   body:在body中引入   false: 不引入
minify : {
removeComments : true,  //删除注释
},
excludeChunks : ['b']  //在生成的html引入不包括b外的所有js文件
}),  //
new HtmlWebpackPlugin({
template: './index.html',
filename : 'b.html',   //打包生成的html名字 
title : ' 我的网页',
inject : 'body',
minify : {
removeComments : true,  //删除注释
},
chunks : ['b','a']  //在生成的html引入b,a的js文件
}) 

],

module : {
rules : [
{
test : /\.js$/,  //正则匹配js结尾的文件
loader : 'babel-loader',  //用babel处理js文件
exclude : /node_modules/,  //  不处理含有node_modules的文件
query : {
presets: ["latest"]   //给babel指定的插件
}
},
{  //webpack 处理css是从右往左,从下往上
test:/\.less$/,
use:[
'style-loader',
'css-loader',
{
loader : 'postcss-loader',
   options: {
   ident: 'postcss',
   plugins: (loader) => [    //postcss-loader的插件
     require('postcss-import')({ root: loader.resourcePath }),  //将css文件中的通过@import导入的css打包在一起
     // require('postcss-cssnext')(),
     require('autoprefixer')({   //自动添加浏览器前缀名
      browsers: ['last 5 versions']
     }),   
     // require('cssnano')()
   ]
}
},
'less-loader'
]
},
{    //webpack 处理css是从右往左,从下往上
test : /\.css$/,
// loader :'style-loader!css-loader'
use : [
'style-loader',
'css-loader',
// 'postcss-loader'   //css的浏览器前缀  
{
loader : 'postcss-loader',
   options: {
   ident: 'postcss',
   plugins: (loader) => [    //postcss-loader的插件
     require('postcss-import')({ root: loader.resourcePath }),  //将css文件中的通过@import导入的css打包在一起
     // require('postcss-cssnext')(),
     require('autoprefixer')({   //自动添加浏览器前缀名
      browsers: ['last 5 versions']
     }),   
     // require('cssnano')()
   ]
}
}
]
},
{  //处理模块
test : /\.html$/,
use : 'html-loader'
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader : 'file-loader',
options : {
outputPath : 'img'
}
}
}
]
},
   

}

webpack配置多页面项目

相信经常使用webpack的人已经深刻体验到自动化工具给我们带来的便利。我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目,聪明的前辈已经为我们配好了项目,可以让我们不必去配置就...
  • nongweiyilady
  • nongweiyilady
  • 2018-02-04 23:21:58
  • 452

webpack多入口文件页面打包配置

大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项目,而且以我的经验来看,这种情况出现的频率还不低,例如项目比...
  • DeepLies
  • DeepLies
  • 2018-01-08 17:42:20
  • 488

vue+webpack多页面打包

  • 2018年01月27日 19:36
  • 24KB
  • 下载

webpack搭建简单的多页面应用

1.新建webpack文件夹,npm -init,按需填写,也可以一路回车,最后‘y’ 2.在webpack目录下新建webpack.config.js文件,因为webpack打包时会自动查找根目录下...
  • b422761838
  • b422761838
  • 2017-08-20 12:28:14
  • 2876

webpack 多页面 打包

最近有一个需求,需要把多页面使用webpack进行编译,但是网上进行多页面编译的资料很少,今天把自己配置的webpack多页面打包编译分享给大家demo地址:https://github.com/me...
  • jiu_meng
  • jiu_meng
  • 2018-03-16 18:51:13
  • 89

webpack编译多页面vue项目的配置问题

一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,...
  • wang839305939
  • wang839305939
  • 2017-07-17 14:59:55
  • 2391

webpack集成bootstrap进行多页面开发

这篇文章已经过时了,有兴趣的可以看看github上示例工程,其基本思想还是一致的: https://github.com/luqingxuan/JqueryPagesExample   ...
  • zshake
  • zshake
  • 2017-05-16 16:49:52
  • 1996

react+webpack多页面程序

  • 2017年11月27日 00:21
  • 895KB
  • 下载

React + WebPack 多入口打包配置

1. 安装编译插件 编译 jsx、es6、scss 等资源 ● 使用 bael 和 babel-loader 编译 jsx、es6 ● 安装插件: babel-preset-es2015...
  • weijizhu1000
  • weijizhu1000
  • 2018-01-12 17:29:32
  • 237

webpack2打包vue与Boostrap并进行多页面打包以及公共js部分的提取

webpack2打包配置文件说明,常见的loader模块加载器以及plugin插件部分的介绍,vue配合bootstrap搭建前端项目demo讲解...
  • u012115763
  • u012115763
  • 2017-04-27 11:05:23
  • 3321
收藏助手
不良信息举报
您举报文章:webpack打包多页面配置
举报原因:
原因补充:

(最多只允许输入30个字)