webpack文件夹打包_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　表示 产品模式，