webpack打包多个html,webpack 打包出多个HTML文件，多个js文件，图片文件放置到指定文件夹中...

一、webpack.config.js简单代码

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

module.exports={//mode 指打包模式

//development 指开发模式，代码未压缩

//production 指产品模式，代码压缩

mode: 'development', //development and production

//entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。

entry: {'./js/first': __dirname + '/src/first.js','./js/second': __dirname + '/src/second.js',

},//output 指明出口文件， 即打包后的文件存放的位置

output: {

path: __dirname+ '/dist',

filename:'[name]_bundle_[hash].js',

},//文件加载器 loader

//loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)

module: {

rules: [

...

]

},//本地服务器配置

devServer: {

contentBase:'./dist', //默认本地服务器所在的根目录

historyApiFallback: true, //是否跳转到index.html

inline: true, //源文件改变时刷新页面

port: 8084 //端口号，默认8080

},//插件

plugins: [

...

]

}

二、webpack.config.js各个模块的介绍

1. mode 介绍

module.exports ={

mode:'production' //或者 development

};

解释： 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

development  表示 开发模式，代码不会压缩(有利于断点调试)

production　表示 产品模式， 代码会进行压缩(不利于断点调试)

2. devServer介绍

module.exports ={//本地服务器配置

devServer: {

contentBase:'./dist', //默认本地服务器所在的根目录

historyApiFallback: true, //是否跳转到index.html

inline: true, //源文件改变时刷新页面

port: 8084 //端口号，默认8080

},

}

解释： webpack-dev-server 可以开启本地服务器，便于开发

3. module介绍

//loader设置

module: {

rules: [

{

test:/\.(css|sass|scss)$/,

loaders: ['style-loader', 'css-loader']

},

{

test:/\.(jsx|js)$/,

use: [{

loader:'babel-loader',

options: {

presets: ['env', 'react', 'stage-0']

}

}]

},

{

test:/\.xml$/,

loaders: ['xml-loader']

},

{

test:/\.(png|svg|jpg|gif|mp4)$/,

use: [{

loader:'file-loader',

options: {

outputPath:'./img',

publicPath:'./img'}

}]

}

]

},

介绍： module.loaders 允许在 webpack 配置中指定多个 loader

例如： babel-loader、style-loader、css-loader、sass-loader、file-loader等，这些都需要先npm install

那么如何在打包时，将图片文件放置到指定文件夹中呢？

options: {

outputPath:'./img', //指定放置目标文件的文件系统路径

publicPath: './img' //指定目标文件的自定义公共路径

}

通过设置 outputPath 可以使得打包后的文件放置到指定的文件夹中(./img)

4. plugins

plugins: [new HtmlWebpackPlugin({ //输出html文件1

title: '123', //生成html文件的标题

favicon: './favicon.png', //生成html文件的favicon的路径

filename: 'first.html', //生成html文件的文件名，默认是index.html

template: 'first.html', //本地html文件模板的地址

hash: true,

chunks: ['./js/first']

}),new HtmlWebpackPlugin({ //输出html文件2

title: '123',

favicon:'./favicon.png',

filename:'second.html',

template:'second.html',

hash:true,

chunks: ['./js/second']

})

]

hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：

chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

此处的chunks和 前面的 entry 入口文件 对应

entry: {

'./js/first': __dirname + '/src/first.js',

'./js/second': __dirname + '/src/second.js',

},

5. output

//output 指明出口文件， 即打包后的文件存放的位置

output: {

path: __dirname+ '/dist',

filename:'[name]_bundle_[hash].js',

},

介绍： output 模块指明 项目打包的出口文件

path：表示出口文件的路径

filename：表示出口js文件的命名，此处的[name]对应 entry入口文件的名称，[hash]在每次编译时产生唯一的hash值

6. entry

//entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。

entry: {'./js/first': __dirname + '/src/first.js','./js/second': __dirname + '/src/second.js',

},

介绍： entry 模块 指明 项目的入口js文件， 可以有多个

'./js/first' ： 是指 文件打包后的路径(放置在js文件夹中)，和 output 模块中的[name] 以及HtmlWebpackPlugin 插件 中的 chunk 对应

三、最后，完整webpack.config.js代码

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

module.exports={//模式设置

mode: 'development', //development and production

//入口设置

//使用babel-polyfill 可以兼容低版本浏览器(不支持es6)

entry: {'./js/first': ['babel-polyfill', __dirname + '/src/first.js'],'./js/second': ['babel-polyfill', __dirname + '/src/second.js'],

},//出口设置

output: {

path: __dirname+ '/dist',

filename:'[name]_bundle_[hash].js',

},//loader设置

module: {

rules: [

{

test:/\.(css|sass|scss)$/,

loaders: ['style-loader', 'css-loader']

},

{

test:/\.(jsx|js)$/,

use: [{

loader:'babel-loader',

options: {

presets: ['env', 'react', 'stage-0']

}

}]

},

{

test:/\.xml$/,

loaders: ['xml-loader']

},

{

test:/\.(png|svg|jpg|gif|mp4)$/,

use: [{

loader:'file-loader',

options: {

outputPath:'./img',

publicPath:'./img'}

}]

}

]

},//本地服务器 webpack-dev-server插件，开发中server，便于开发，可以热加载

devServer: {

contentBase:'./dist', //默认本地服务器所在的根目录

historyApiFallback: true, //是否跳转到index.html

inline: true, //源文件改变时刷新页面

port: 8084 //端口号，默认8080

},//插件设置

//HtmlWebpackPlugin 可以在开发中按照模板生成 html文件

plugins: [new HtmlWebpackPlugin({ //输出html文件1

title: '123', //生成html文件的标题

favicon: './favicon.png', //生成html文件的favicon的路径

filename: 'first.html', //生成html文件的文件名，默认是index.html

template: 'first.html', //本地html文件模板的地址

hash: true,

chunks: ['./js/first']

}),new HtmlWebpackPlugin({ //输出html文件2

title: '123',

favicon:'./favicon.png',

filename:'second.html',

template:'second.html',

hash:true,

chunks: ['./js/second']

})

]

}

webpack.config.js完整代码