javascript全栈开发实践-web-8_webpack_weixin_34289454-开放原子开发者工作坊

接下来，我们将会使用webpack来组织我们的代码。首先，我们需要安装nodejs。因为nodejs里面，有一个非常有用的工具npm，可以用来帮我们开发js应用。而在后面，npm将会贯穿整个教程。首先，去node官网下载最新版本的nodejs。你可以下载LTS版本，也可以下载最新的版本。nodejs.org/en/ 接下来，回到我们源代码的文件夹（HandwrittenNotes），在下面建立一个新的文件夹：packed-html 目录结构如下：

HandwrittenNotes
 - html
 - packed-html
复制代码

第一步，初始化工程

然后启动一个命令行，并切换当前目录到packed-html里面。然后执行下面的命令：

npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
复制代码

第二步，建立主html和js文件

接下来，我们在packed-html下面，建立一个新的文件夹，叫做dist。然后，在dist文件夹里面，建立一个index.html文件，内容如下：

<!doctype html>
<html>
<head>
  <title>Getting Started</title>
</head>
<body>
    <div id="pad_container" style="width:600px; height: 400px;">
      <canvas id="pad" style="width: 100%; height: 100%; "></canvas>
    </div>
    <script src="main.js"></script>
</body>
</html>
复制代码

在packed-html下面，再建立一个src文件夹，然后建立index.js文件。js文件内容，暂时为空。其中，index.html文件，将会是我们的主html文件。而index.js文件，将会是脚本的主文件入口，类似于我们在java/c++里面的主函数所在的文件，例如main.cpp等。

第三步，修改配置。

首先，npm init已经给我们自动建立了一个package.json文件。我们修改里面的内容：

{
  "name": "packed-html",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}
复制代码

最主要的，就是我们增加了两个命令：

    "start": "webpack-dev-server --open",
    "build": "webpack"
复制代码

然后，我们还需要新建一个webpack.config.js文件，内容如下：

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
            presets: ["es2015", "stage-0"]
        }
      }
    ]
  },  
};
复制代码

第四步，测试环境

在packed-html文件夹下面，执行命令：

npm run start
复制代码

如果没有任何错误，那么稍等一会儿，将会在浏览器内打开一个新的页面，地址一般是http://localhost:8080 接下来，我们修改以下index.js文件，简单的假如一个alert：

alert('hello');
复制代码

保存。然后你应该会看到，浏览器内自动刷新了我们的页面，并且弹出了hello消息。这样我们就完成了webpack环境初始化。

调试代码

webpack会把我们的代码，打包成一个main.js文件，并且这个文件默认是被压缩的，并不方便我们进行调试代码。不过webpack也会生成一个source map文件。利用source map文件，我们就可以很方便的调试了。首先，在chrome浏览器内打开我们的网页（我们以后默认都会使用chrome，因为后面在制作桌面App的时候，我们实际上就是在Chromium里面运行的）。然后，进入开发工具，切换到source，然后展开左侧的webpack:// -> . -> src，就可以看到我们的代码了。目前我们只有一个index.js，以后增加新的文件之后，也会在这里显示出来。点击相应的文件名，则会显示出代码。我们可以直接添加断点进行调试。

当然，我们也可以安装vscode的插件，这样可以直接在vscode里面调试我们的代码。具体步骤，可以在google里面搜索。

记下来，我们将会把我们的代码从之前的html里面，移动到新的webpack工程里面。

参考资料：