【已解决】webpack 使用详解：浏览器显示 Hello World

webpack没安装好的同学可以看下我这篇博文：webpack安装详解。

 

1.在桌面新建一个文件夹，我命名为 “test"。

2.按win + R，输入 cmd，打开命令行工具。

3.输入cd desktop/test，打开刚刚创建的 "test" 文件夹（如果你不是在桌面创建的，那么cd后面的路径需要相应改变），如下图，可以看到当前文件目录已经改变了。

4.输入 npm init，一路 Enter ，然后在 test 文件夹内出现了一个 package.json 文件。

5.输入 npm install，安装依赖，然后文件夹中会出现一个 package-lock.json 文件（记录当前状态下实际安装的各个npm package的具体来源和版本号）。

6.输入 npm install --save-dev webpack，将webpack安装到项目目录中，然后会多出一个 node_modules 的文件夹。

7.在 test 文件下下新建三个文件：index.html，main.js，webpack.config.js。里面代码依次如下：

  index.html：

  main.js：

// main.js
document.write('
Hello World!
');

  webpack.config.js：

// webpack.config.js
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
};

8.在package.json的 script 字段下如下添加一行：

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

  如下图：

9.在命令行工具中运行：npm run dev，浏览器即可自动打开，显示 Hello World!，如果未能自动打开，则访问 http://127.0.0.1:8080 即可。

输入后命令行工具中显示如下图；

浏览器中显示：

      大功告成！

 

      注意：本篇博文旨在让小白能够熟悉webpack使用的流程，具体各种命令的意义、配置的详情等可自行搜索。

         关于webpack的学习，推荐两个网站：webpack中文文档 和 阮一峰webpack学习教程。

         最后，大家有遇到问题或者好的建议，欢迎留言，喜欢的请点个赞哦。

         祝大家早日掌握、熟练使用webpack！