@panhonhang 2018-08-03T09:54:05.000000Z 字数 1781 阅读 580

webpack入门使用

webpack

首先了解让我们来了解一下什么叫做webpack：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

详情了解webpack中文文档

接下来让我们开始第一步吧！

首先我们在电脑上新建一个名为test的文件夹。然后打开命令行输入以下命令：

npm init

输入这个命令后，终端会问你一系列问题，但是假如你不准备在npm中发布你的模块，直接回车默认就可以了。之后你会发现你的test文件夹里面多了一个package.json文件。

接下来我们就可以放心的下载webpack了，输入以下命令：

// 安装Webpack
npm install --save-dev webpack

下载成功以后，我们在test文件夹里面在新建两个文件夹分别叫做dist和app。然后我们在app里面新建一个main.js文件。

main.js里面输入：

document.write("hello");

完成后我们在dist里面新建一个index.html文件。

index.html里面输入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

接下来我们打开终端输入：

node_modules/.bin/webpack app/main.js dist/bundle.js

然后你就会发现在dist文件里面多了一个bundle.js文件。然后我们在浏览器里面打开就会看见网页上面显示:

    hello

但是这样你每次都需要输入：

node_modules/.bin/webpack app/main.js dist/bundle.js

我们来用一个更加方便的方法，在文件夹中新建webpack.config.js文件，在里面输入一下代码：

    module.exports = {
      entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
      output: {
        path: __dirname + "/dist",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      }
    }

接下来只需要使用node_modules/.bin/webpack就可以完成打包

但是这样依然非常麻烦，我们还可以使用更加快捷的方法。在package.json中对scripts对象进行相关设置：

"scripts": {
    "start": "webpack"
}，

注:

package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

我们可以使用Source Maps来帮助我们调试代码。

在webpack.config.js文件里面加入以下代码：

devtool: 'eval-source-map',

通过简单的配置，webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

我们还可以使用webpack构建本地服务器

首先我们安装devserver：

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

然后我们在webpack.config.js中新加入：

devServer: {
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新

}

然后在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

"server": "webpack-dev-server --open"

我们只需要在终端中输入npm run server就可在本地的8080端口查看结果

webpack入门使用

内容目录