webpack的一些常用配置 （转）

webpack 的配置文件就是 Node 的一个模块，它导出的将是一个对象

module.exports = {
 entry: './entry',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js'
 }
}

如果直接使用 webpack 来执行编译，webpack 默认读取的是当前目录下的 webpack.config.js 文件

如果你有其他命名的配置文件，可以使用 –config 参数传入路径

webpack --config ./webpackConfig/dev.config.js

配置入口：entry

入口可以是单入口（字符串），也可以是多入口（数组/对象），为了方便后续维护，最好写成对象

module.exports = {
 // pagesDir 是前面准备好的入口文件集合目录的路径
 entry: {
 'alert/index': path.resolve(pagesDir, `./alert/index/page`), 
 'index/login': path.resolve(pagesDir, `./index/login/page`), 
 'index/index': path.resolve(pagesDir, `./index/index/page`),
 }
}

entry 属性的 name 对应具体的目录

├─src # 当前项目的源码
 ├─pages # 各个页面独有的部分，如入口文件、只有该页面使用到的css、模板文件等
 │ ├─alert # 业务模块
 │ │ └─index # 具体页面
 │ ├─index # 业务模块
 │ │ ├─index # 具体页面
 │ │ └─login # 具体页面

输出文件：output

output 参数与 entry 不同：output 参数告诉 webpack 以什么样的方式来 生成/输出 文件。output 参数相当于一套规则，所有的入口都必须使用这一套规则。

module.exports = {
 output: {
 path: path.resolve(__dirname, 'build'),
 filename: '[name]/entry.js',
 publicPath: 'build',
 chunkFilename: '[id].bundle.js'
 }
}

path

path 参数表示生成文件的根目录，需要传入一个绝对路径， path 参数和后面的 filename 参数共同组成了输出文件的路径

filename

filename 属性表示的是如何命名生成出来的入口文件，规则有以下三种：

• [name] ：入口文件的 name
• [hash] ：本次编译的一个 hash 版本，只要在同一次编译过程中生成的文件，这个 hash 的值就是一样的
• [chunkhash] ： chunk 的一个 hash 版本，在同一次编译中，每一个 chunk 的 hash 都是不一样的，在两次编译中，如果某个 chunk 根本没发生变化，那么该 chunk 的 hash 就不会发生变化

publicPath

publicPath 参数表示的是一个 URL 路径，用于生成 css/js/image/fonts 等资源的路径，以确保网页能正确地加载到这些资源。

chunkFilename

chunkFilename 与 filename 参数类似，都是用来定义文件的命名方式，只不过chunkFilename 参数指定的是除入口文件外的 chunk 的命名。

Loader配置：module

webpack 的核心实际上只能对 js 进行打包，webpack 可以通过 loader 将那些不是 js 的文件转换成 js，再进行打包。

module.exports = {
 loaders: [
 {
 test: /\.jsx$/,
 include: [
 path.resolve(__dirname, 'app/src'),
 path.resolve(__dirname, 'app/test')
 ],
 exclude: [
 path.resolve(__dirname, 'node_modules')
 ],
 loader: 'babel-loader'
 }
 ]
}