前面一章我们简单的介绍了一下webpack的四个核心概念，现在我们利用这篇文章详细的了解下。
1. 入口起点(Entry Points)
前面说过entry是规定webpack的入口文件。
-
单个入口语法
用法：entry: string|Array<string>**
//webpack.config.js
//简写
const config = {
entry: './path/to/my/entry/file.js'
};
//原本的写法
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
module.exports = config;
当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。
-
对象语法
用法：entry: {[entryChunkName: string]: string|Array<string>} **
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。
- 常见场景
分离 应用程序(app) 和 第三方库(vendor) 入口
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
多页面应用程序
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
2.输出(Output)
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
-
用法
在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：- filename 用于输出文件的文件名。
- 目标输出目录 path 的绝对路径。
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
module.exports = config;
- 多个入口起点
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
// 写入到硬盘：./dist/app.js, ./dist/search.js
- 高级进阶
output: {
path: "/home/proj/cdn/assets/[hash]",
publicPath: "http://cdn.example.com/assets/[hash]/"
}
在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 webpack_public_path。
__webpack_public_path__ = myRuntimePublicPath
// 剩余的应用程序入口
3.Loader
loader是用于对源代码进行转换，可以使你在import或者require模块时预处理文件。loader可以将文件从不同语言转换为JavaScript，或者将内联图像转为DATA URL，或者可以在JavaScript模块中import样式文件。
-
使用loader
这里就主要介绍配置的方法来使用loader，如下：
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: ['style-loader'](https://doc.webpack-china.org/loaders/style-loader) },
{
loader: ['css-loader'](https://doc.webpack-china.org/loaders/css-loader),
options: {
modules: true
}
}
]
}
]
}
4.插件
webpack 插件是一个具有 apply
属性的 JavaScript 对象。apply
属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
function ConsoleLogOnBuildWebpackPlugin() {
};
ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
compiler.plugin('run', function(compiler, callback) {
console.log("webpack 构建过程开始！！！");
callback();
});
};
-
用法
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins属性传入 new实例。根据你的 webpack 用法，这里有多种方式使用插件。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
