--- group: middleware name: webpack title: Webpack index: 1 ---
---
group: middleware
name: webpack
title: Webpack
index: 1
---
这是一个基于 webpack3 的构建中间件，默认能处理「js/jsx/ts/less/css/image/font」等文件
webpack 配置，还可通过 config 选项指定配置文件路径以上都可以在 pipe.yml 中配置完成，用于不同的工程或模板时作者可根据情况有不同配置。
yml
dev:
- name: webpack
watch: true # 是否开启 watch，开启后，文件发生变化时将会实时增量编译
entry: ./src/*.js # 将 src 下所有 .js 文件作为入口（不包括子目录中的 js,）
template: ./src/assets/*.html # 将 assest 下的所有 html 作为页面模板 build:
- name: webpack
entry: ./src/*.js # 将 src 下所有 .js 文件作为入口（不包括子目录中的 js,）
template: ./src/assets/*.html # 将 assest 下的所有 html 作为页面模板
externals: # 声明排除的库文件，将不会打入 chunks 中
jquery: jQuery
common:
disabled: true # 是否禁用抽取公共部分
name: 'common' # 生成的公共资源名称
cssModules: true # 是否启用 css modules 方案
output: build # 构建结果目录，默认为 build
folders: # 指定资源子目录名称
js: js
css: css
font: font
img: img
` 注意：
-
entry 和 template 的值都可以是一个数组，当 template 只有一个文件时将作为公共模板，所有 chunk 共用
- entry 的默认值为 ./src/\.js，tempalte 的默认值为 ./src/assets/\.html
- 和 template 还可以用 map 形式配置合并自定义 webpack 配置
webpack 中间件，允行开发者自定义「构建配置」，开发者只需要在当前工程根目录添加 webpack.config.js 文件即可，示例：
`js
module.exports = function(configs,webpack,ctx){
//configs 为默认配置，可以在这里对其进行修改
//webpack 当前 webpack 实例
//ctx 当前构建「上下文实例」
configs.module.loaders.push();
};
` 另外，开发者还可以通过
自定义「配置文件路径」，如下：
`yml
dev:
- name: webpack
watch: true
configFile: ./wp.conf.js
` 如上边示例，在 dev 时 webpack 中间件将会加载名为
的构建配置 ## 完全自定义 webpack 配置
除了合并部分自定义的配置，还可以完全使用自定义的 webpack 配置，如下
`js
module.exports = {
...
...
};
` 当然，如果目前的