【译】如何搭建一个 Webpack 项目

Webpack 是 web 应用程序的打包器。在过去,你必须在 HTML中手动链接 JavaScript 文件。现在,Webpack负责来解决这个问题。在本教程中,我将带你在一个 JavaScript + HTML 应用程序上完成迷你化的 Webpack 配置。之后,你应该能够自己扩展 Webpack 特性,改进你的 JavaScript 应用,或者你自己站点。

项目文件/文件夹结构

我们将从创建一个distribution文件夹开始。稍后,这个文件夹将用于为你的应用程序提供服务在本地或远程web服务器。为应用程序提供服务,这样就可以在浏览器里查看它,也可以将它托管在外部服务器上,这样每个人都可以通过HTTP访问它。毕竟,distribution文件夹是发布web应用程序所需要的一切。首先,在项目的根目录下用命令创建distribution文件夹和一个HTML文件作为你应用程序的入口点:

mkdir dist
cd dist
touch index.html

文件的名称由你决定。通常会发现它被命名为distpublicbuild。你还可以自己给HTML起一个名字。然而,将其命名为index.html是一种广泛使用的命名约定。下一步,为创建的dist/index.html提供如下内容:



  
    Hello Webpack
  
  
    

Hello Webpack

该文件包含了浏览器中你的站点显示所需的所有HTML。这里目前还没有涉及到JavaScript。为了让你开始使用JavaScript,将下列日志记录放到src/index.js文件中:

console.log('Hello Webpack Project.');

现在,你的项目应该有一个dist/src/文件夹:

- dist/
-- index.html
- src/
-- index.js
- package.json

你可能会想:为什么我们不把所有的文件都放到一个文件夹里呐?这是因为在接下来的步骤中,我们将确保src/文件夹中的所有JavaScript源代码文件都将被绑定到一个单独的JavaScript文件中,该文件将自动放置到dist/文件夹中。通过保持文件夹的分离,你可以确保将应用程序带到web服务器上生产所需的所有内容都位于dist/文件夹中,而实现应用程序所需的所有内容都位于/src文件夹中。

现在,将JavaScript链接到HTML文件最直接的方法是:



  
    Hello Webpack
  
  
    

Hello Webpack

然而,随着时间的推移,这可能会变成一项重复乏味的工作,因为你必须追踪你的HTML链接了哪些JavaScript文件。这就是为什么我们使用Webpacksrc\文件夹中的所有源码生成为一个JavaScript包,这个包随后自动放入dist/文件夹中。然后,它可以使用如下方式作为HTML文件的入口点:



  
    Hello Webpack
  
  
    

Hello Webpack

因此,我们需要配置Webpack为我们打包源码。下面就让我们进入Webpack吧。

Webpack 安装

你将使用Webpack打包你的JavaScript源码,并且添加一些高级的特性去构建你的项目用于进一步的构建步骤中。此外,你将使用Webpack Dev Server在本地开发环境中为你的项目提供服务,达到本地服务器开发的目的。最后但并非重要的是,你可以使用Webpack CLI。让我们使用npm来为你的项目安装这三个依赖库(node packages)吧。在你项目的根目录下,输入如下命令,将所有库安装为开发依赖项。

npm install --save-dev webpack webpack-dev-server webpack-cli

注意:开发依赖项不会绑定到生产环境中。(开发依赖项,指明--save-dev)这样,你可以使生产代码的包保持轻量级。例如,如果你希望测试源码,可以在本地开发环境下测试,并且所有测试库安装为开发依赖项,但是这些库并不会包含在实际的生产应用程式中。只有用于运行源代码的依赖项才需要作为生产就绪的依赖项。安装生产依赖项的时候不使用--save-dev标志

作为一个副作用,你应该会发现一个node_modules/文件夹里面包含所有第三方依赖。通常你不需要关心它们。所有的依赖都会在package.json里面列出来,可以看到依赖以及它们的版本号。现在,你的文件夹结构如下:

- dist/
-- index.html
- src/
-- index.js
- node_modules/
- package.json

在你的package.json文件中,将start脚本更改为使用Webpack Dev Server启动的脚本:

{
  ...
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

你可以再次在命令行上运行npm start脚本,然而,这次使用Webpack作为本地服务器以开发模式服务你的文件。导航到dist/index.html文件去看看浏览器的输出。你可能在development tools里面看到你的浏览器找不到bundle.js。这是因为你没有告诉Webpack为我们生产它。接下来,让我们看看如何使用Webpack将源码文件从src/文件夹打包到dist/下。因此,将如下内容添加到package.jsonnpm start脚本中。

{
  ...
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

这个脚本定义了你希望使用Webpack Dev Server和名为webpack.config.js的配置文件。让我们在项目的根目录创建所需的webpack.config.js

touch webpack.config.js

现在你的目录结构看起来应该是这样的:

- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js

为新创建的wepack.config.js文件配置如下的配置:

module.exports = {
  // 1
  entry: './src/index.js',
  // 2
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  // 3
  devServer: {
    contentBase: './dist'
  }
};

这个Webpack配置文件给出了下列指令:

  • (1) 使用src/index.js文件作为入口点来打包它。如果src/index.js文件中有导入其他的JavaScript文件,也要打包他们。
  • (2) 打包的源码文件将在/dist文件夹下生成一个bundle.js文件。
  • (3) /dist目录将用于服务应用程序给浏览器

完成上述所有事情后,你应该再次启动Webpack Dev Server服务器。在这之前,确保你的dist/index.html已经包含了之前生成的bundle.js文件:



  
    Hello Webpack
  
  
    

Hello Webpack

使用npm start启动应用程序后,在浏览器中打开应用程序。注意:浏览器的URL在命令行上也应该是可见的。在浏览器中打开应用程序后,应该能够看到dist/index.html文件的输出和src/index.js文件的日志记录。如果从src/index.js文件导入更多的JavaScript源代码文件,它们也将被Webpack绑定到bundle.js中。

你可能感兴趣的:(【译】如何搭建一个 Webpack 项目)