Node.js应用程序一起使用Webpack的4个简单步骤
Webpack是一个构建工具，可以更轻松地处理静态资源。使用Webpack，您可以轻松转换和优化来自单个配置的JavaScript，CSS，图像等等。在本教程中，我们将向您介绍使用Webpack与现有Node.js Web应用程序的4个简单步骤。
前言：什么是Webpack？
Webpack主要是一个JavaScript模块打包器。像React这样的库越来越受欢迎，它很大程度上依赖预处理将ES6打包并编译为更适合浏览器的ES5语法。Webpack不仅限于JavaScript，还可用于编译不同风格的CSS（SASS，LESS），优化图像等。它具有热重新加载和代码拆分功能，可为浏览器提供更优化的开发体验和最佳性能。
以下是使用Webpack与现有Node.js Web应用程序的4个简单步骤。在这个例子中，我们将使用Babel使用Webpack将ES6转换为ES5。
1）安装软件包
使用Webpack的第一步是安装必要的依赖关系。使用npm可以轻松安装Webpack：
npm install webpack --save-dev
这将安装Webpack并将其保存为package.json文件中的开发依赖项。
Webpack依靠装载器在捆绑过程中处理和编译资产。在这个例子中，我们希望使用带有Webpack的Babel加载器将ES6转换为ES5。为了使用Babel加载器，我们需要安装Babel以及与Webpack一起使用的相应加载器和预设：
npm install babel-core babel-loader babel-preset-es2015 --save-dev
这将安装Babel以及与Webpack一起使用的babel-loader和babel-preset- es2015。
2）配置Webpack
现在我们已经安装了所有必需的软件包，现在可以为我们的Node.js应用程序配置Webpack了。在项目的根目录下，创建一个webpack.config.js并为其提供以下内容：
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './public/js/main.js',
output: {
path: path.resolve(__dirname, 'public/js/'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
};
这是Webpack基本配置的一个例子。注意我们如何定义入口点。这告诉Webpack我们想要包含在我们的包中。虽然我们已经指定了一个./public/js/main.js文件，但您可以指定要包含的文件数组。还要意识到入口点指定了要包含的顶层文件。这意味着如果我们的main.js文件使用require（）或import来包含其他模块，那么Webpack将把这些模块作为bundle的一部分来处理。
注意我们还包括了一个输出对象。这指定了我们从Webpack构建生成的结果包文件的路径和名称。这意味着Webpack会将我们的入口点文件main.js处理并捆绑它，然后将结果输出到一个bundle.js中，我们可以直接在HTML中引用它们。
在模块对象中，我们指定了用于Webpack构建的加载器。请记住，Webpack使用加载器来处理我们在入口对象中指定的文件。在这个例子中，我们已经指定我们要使用babel-loader和es2015预设来将ES6代码转换为ES5。
3）更新HTML
现在我们已经指定了一个输出文件，现在是更新我们的HTML的时候了。具体而言，我们想用我们在Webpack配置中指定的输出文件替换对原始条目文件main.js的引用：
<script src="bundle.js"></script>
4）运行Webpack
现在已经配置了webpack并在DOM中引用了生成的包文件，现在是时候运行Webpack了。要运行Webpack，只需运行：
webpack
这将生成具有转换代码的指定bundle.js文件。如果一切正常，您应该在控制台中看到类似于以下输出的内容：
Hash: 53a4fdfb2a82d853e503
Version: webpack 3.10.0
Time: 3924ms
Asset Size Chunks Chunk Names
bundle.js 6.36 kB 0 [emitted] main
bundle.js.map 11 kB 0 [emitted] main
[0] ./public/js/main.js 3.83 kB {0} [built]
以手表模式运行
您可以选择以监视模式运行webpack，这样每次更改受影响的文件时都不必手动运行webpack。为此，只需添加--watch标志：
webpack --watch
现在，无论何时更改入口文件（或其中一个引用的文件），webpack都会自动运行构建并更新生成的bundle.js文件。
结论
在这个基本示例中，我们演示了如何将Webpack与现有的Node.js项目一起使用，以执行ES6到ES5的转换。重要的是要记住，Webpack不仅可用于处理JavaScript，还可用于处理CSS，图像，字体等。通过在Webpack配置中指定不同的加载器，您可以使用Webpack优化静态资产并简化开发流程。
