webpack打包初体验

1、确保在 node 和 npm 环境下，如果没有，先安装 node 环境。我的 node:

2、新建一个文件夹 web，在命令行里进入 web, 执行 npm init

此时，web 文件夹下多了一个 package.json 文件。

3、安装 webpack, 执行:npm install webpack –save-dev, 安装完成后文件目录如下:

4、在 web 下新建 index.html、webpack.config.js, 在 web 目录下新建 css、src、img 文件夹，目录结构如下:

5、关键点：在 webpack.config.js 文件中做如下配置:

在 src 目录下新建 app.js 作为入口文件，随便写点什么，比如 console.log(123).
打开 package.json, 在 scripts 里添加：“start”: “webpack”
在命令里执行 npm start, 如下所示：

文件目录下多了 dist/bundle.js; 目录结构如下:

将 bundle.js 引入 index.html, 打开浏览器控制台打印出 123，至此最简单的 webpack 打包成功。
本文仅献给初学 webpack 的同学，webpack 功能强大，想要学好仍需多多学习。
项目下载地址：https://github.com/zhangshuan…