webpack
在开发过程中，webpack是一一款模块化开发编译打包的一款利器，下面我们对webpack的一些配置进行一些解剖式的学习吧！
var webapck =require("webpack); var path=require("path"); modules.export={ devtool: 'source-map', entry: [ './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, }在上面这部分代码中：
devtool:
entry
bundle的入口文件
- 如果传入一个字符串，这个字符串就会被解析为启动时加载的模块。
- 如果传入个数组，所有模块都是启动时加载，模块导出到最后一个里面,即把多个文件打包合并成一个
entry: ["./entry1", "./entry2"] - 如果传入一个对象，就会创建多个输入包文件，对象键值就chunk的name，值可以是字符串或者是数组。
entry: {
page1: "./page1",
page2: ["./entry1", "./entry2"]
},
output: {
// 当使用多入口文件时候，要确保在output.filename使用[name]或者[id]
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}
注意: 没有别的专门来配置入口点的选项。如果你需要一个专门来配置入口点的配置对象，你需要用到××多个配置对象××
output
output是影响编译输出的选项。output选项告诉webpack怎么把编译文件写入磁盘。注意，虽然可以有很多输入口，但是只有一个输出配置
如果使用了哈希([hash] 或者 [chunkhash]), 需要确保有一个一致的模块顺序。使用OccurenceOrderPlugin插件或者 recordsPath。(译者：参看这个issue)
output.filename
指定输出到硬盘的文件的文件名。这里必须是相对路径
单一入口：
{
entry: "./src/app.js",
output: {
filename:"bundle.js",
path:"./build"
}
}
多入口
如果带有多个入口点，或者使用了CommonsChunkPlugin这样的插件，你应该使用替换符来为每个文件命名一个为一个名字。
[name] 被chunk的名字替换。
[hash] 被编译器hash替换。
[chunkhash]被chunk的hash替换
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/built'
}
}
// 输出到磁盘: ./built/app.js, ./built/search.js
output.path
绝对路径（required）
[hash]被编译后 文件的hash替换
output.publicPath
publicPath指定了一个在浏览器中被引用的URL地址。对于使用 <script>和<link>加载器，当文件路径不同于他们的本地磁盘路径(由path指定)时候，publicPath被用来作为href或者url指向该文件。这种做法在你需要将静态文件放在不同的域名或者cdn上面的时候是很有用的。与path搭配使用[hash]就能做好缓存方案了。
config.js
path: "/home/proj/public/assets",
publicPath: "/assets/"
}```
index.html
<head>
<link href="/assets/spinner.gif"/>
</head>
如果使用CDN和hash的例子
```output: {
path: "/home/proj/cdn/assets/[hash]",
publicPath: "http://cdn.example.com/assets/[hash]/"
}```
注: 万一最终输出文件的publicPath在编译的时候不知道，那么你可以不填，动态的在运行时添加也可以。如果在编译过程你不知道publicPath你可以忽略他，然后在你的入口文件里面添加上这个字段就可以了__webpack_public_path__。
```__webpack_public_path__ = myRuntimePublicPath
// rest of your application entry```
##### output.chunkFilename
非入口chunk的文件名，作为一个相对路径放在output.path里面。
[id] 替换chunk的id.
[name] 替换chunk的名字 (or 如果没有名字就用id替换).
[hash] 替换编译的hash.
[chunkhash] 替换chunk的hash.
##### output.sourceMapFilename
js文件的sourceMap的文件名，也同样在output路径下面。
[file] 替换js文件的文件名.
[id] 替换chunk的id.
[hash] 替换编译的hash.
默认: "[file].map"
### module
###### module.loaders
自动引用的加载器的数组
每个元素有这些选项
- test:必须满足的条件
- exclude:不满足的条件
- include:必须满足的条件
- loader:用“!"隔开多个loader
- loaders：多个loader
重要信息：这里的loader解析了他们应用相关的资源，这意味着他们不需要解析配置过的文件。如果你用npm安装loaders，node_modules文件夹不在资源文件夹的父目录中，webpack就找不到这个loader。你需要把node_modules文件夹的绝对路径添加到resolveLoader.root这个选项中。 (resolveLoader: { root: path.join(__dirname, "node_modules") })
例子：
module: {
loaders: [
{
// "test" is commonly used to match the file extension
test: /.jsx$/,
// "include" is commonly used to match the directories
include: [
path.resolve(__dirname, "app/src"),
path.resolve(__dirname, "app/test")
],
// "exclude" should be used to exclude exceptions
// try to prefer "include" when possible
// the "loader"
loader: "babel-loader"
}
]
}````
网友评论