114 lines
3.2 KiB
JavaScript
114 lines
3.2 KiB
JavaScript
|
/**
|
|||
|
|
* Created by Zhang Peng on 2017/6/14.
|
|||
|
|
*/
|
|||
|
|
const path = require('path')
|
|||
|
|
const webpack = require('webpack')
|
|||
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|||
|
|
|
|||
|
|
|
|||
|
|
module.exports = {
|
|||
|
|
|
|||
|
|
// 这里应用程序开始执行
|
|||
|
|
// webpack 开始打包
|
|||
|
|
// 本例中 entry 为多入口
|
|||
|
|
entry: {
|
|||
|
|
// 第三方库
|
|||
|
|
vendor: ['babel-polyfill']
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// webpack 如何输出结果的相关选项
|
|||
|
|
output: {
|
|||
|
|
// 所有输出文件的目标路径
|
|||
|
|
// 必须是绝对路径（使用 Node.js 的 path 模块）
|
|||
|
|
path: path.resolve(__dirname, '../dist'),
|
|||
|
|
|
|||
|
|
// 「入口分块(entry chunk)」的文件名模板（出口分块？）
|
|||
|
|
// filename: "bundle.min.js",
|
|||
|
|
// filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
|
|||
|
|
// filename: "[chunkhash].js", // 用于长效缓存
|
|||
|
|
filename: '[name].[hash:8].js',
|
|||
|
|
|
|||
|
|
// 「source map 位置」的文件名模板
|
|||
|
|
sourceMapFilename: '[name].map'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关于模块配置
|
|||
|
|
module: {
|
|||
|
|
|
|||
|
|
// 模块规则（配置 loader、解析器等选项）
|
|||
|
|
rules: [
|
|||
|
|
// 这里是匹配条件，每个选项都接收一个正则表达式或字符串
|
|||
|
|
// test 和 include 具有相同的作用，都是必须匹配选项
|
|||
|
|
// exclude 是必不匹配选项（优先于 test 和 include）
|
|||
|
|
// 最佳实践：
|
|||
|
|
// - 只在 test 和 文件名匹配 中使用正则表达式
|
|||
|
|
// - 在 include 和 exclude 中使用绝对路径数组
|
|||
|
|
// - 尽量避免 exclude，更倾向于使用 include
|
|||
|
|
{
|
|||
|
|
// 语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
|
|||
|
|
test: /\.jsx?$/,
|
|||
|
|
include: path.resolve(__dirname, '../src'),
|
|||
|
|
exclude: /node_modules/,
|
|||
|
|
|
|||
|
|
// 应该应用的 loader，它相对上下文解析
|
|||
|
|
// 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
|
|||
|
|
// 查看 webpack 1 升级指南。
|
|||
|
|
loader: 'babel-loader'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
// css 加载
|
|||
|
|
test: /\.css$/,
|
|||
|
|
use: ['style-loader', 'css-loader']
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
// less 加载
|
|||
|
|
test: /\.less$/,
|
|||
|
|
use: ['style-loader', 'css-loader', 'less-loader']
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
// 字体加载
|
|||
|
|
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
|||
|
|
loader: 'url-loader',
|
|||
|
|
options: {
|
|||
|
|
limit: 10000,
|
|||
|
|
name: 'static/fonts/[name].[hash:8].[ext]'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 解析模块请求的选项
|
|||
|
|
// （不适用于对 loader 解析）
|
|||
|
|
resolve: {
|
|||
|
|
// 使用的扩展名
|
|||
|
|
extensions: ['.js', '.jsx', '.json'],
|
|||
|
|
|
|||
|
|
alias: {
|
|||
|
|
'@': path.resolve(__dirname, '../src')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 附加插件列表
|
|||
|
|
plugins: [
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* https://doc.webpack-china.org/plugins/html-webpack-plugin/
|
|||
|
|
* 用于简化 HTML 文件（index.html）的创建，提供访问 bundle 的服务
|
|||
|
|
*/
|
|||
|
|
new HtmlWebpackPlugin({
|
|||
|
|
title: 'reactapp',
|
|||
|
|
template: 'public/index.html',
|
|||
|
|
favicon: 'public/favicon.ico'
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 将多个入口起点之间共享的公共模块，生成为一些 chunk，并且分离到单独的 bundle 中
|
|||
|
|
new webpack.optimize.CommonsChunkPlugin({
|
|||
|
|
name: 'vendor' // 指定公共 bundle 的名字
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
}
|