一、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 插件的 部分功能
解释: webpack-dev-server 可以开启本地服务器,便于开发
详细请查找 https://www.webpackjs.com/configuration/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形式如下所示:
<script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
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代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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'] }) ] }