webpack 中的四个核心概念 （Demo2 Source）
-
Entry入口 -
Output输出 Loaders-
Plugins插件
webpack 中默认的配置文件名称是 webpack.config.js，因此我们需要在项目中创建如下文件结构：
.
├── index.html // 显示的页面
├── main.js // webpack 入口
├── webpack.config.js // webpack 中默认的配置文件
└── bundle.js // 通过 webpack 命令生成的文件，无需创建
entry 入口
入口起点（entry point）指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后。 webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
可以在 webpack.config.js 中 配置 entry 属性，来指定一个入口或多个起点入口，代码如下:
moudle.exports = {
entry: './path/file.js'
};
output 输出
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。你可以通过在配置指定一个 output 字段，来配置这些过程：
const path = require('path');
moudle.exports = {
entry: './path/file.js',
output:{
path: path.resolve(__dirname,'dist'),
filename: 'my-webpack.bundle.js'
}
}
其中 output.path 属性用于指定生成文件的路径，output.filename 用于指定生成文件的名称。
Loaders
Loaders 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用模块。在更高层面上，在 webpack 的配置中 loader 有两个目标：
- 识别应该被对应的
loader进行转换的那些文件（使用test属性） - 转换这些文件，从而使其能够被添加到依赖图中（并且最终添加到
bundle中）(use属性)
在开始下面的代码之前，我们需要安装 style-loader 和 css-loader
$ npm install --save-dev style-loader css-loader
并在项目中创建 style.css 样式文件:
h1{ color: red; }
然后在 webpack.config.js 中输入以下代码：
const path = require('path');
module.export = {
entry: './main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
}
};
Plugins 插件
Loaders 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
想要使用一个插件，需要 require() 它，然后把它添加到 Plugins 数组中，多数插件可以通过选项自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的实例。
在开始下面的代码之前，我们需要安装 html-webpack-plugin 插件：
$ npm install html-webpack-plugin --save-dev
它可以简化HTML文件的创建，为您的webpack包提供服务。
然后在 webpack.config.js 中输入以下代码：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const config = {
entry: './main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' })
]
};
module.exports = config;
运行与配置
最后我们可以直接通过 webpack 命令编译打包,如果想要在其命令后加入参数，可以通过配置 package.json 文件中的 scripts 属性：
{
scripts: {
"build": "webpack --config webpack.config.js --progress --display-modules"
}
}
当然如果你想要更改默认的配置文件名称，可以将 --config 后面的 webpack.config.js 配置文件名改为你自定义的名称。
通过以下命令执行：
$ npm run build
