使用webpack打包详解

新建一个webpackapp文件夹（名字随便取，文件路径不能为中文）
在webpackapp文件夹内打开终端cmd
然后进行下面的操作：

检查npm是否安装成功
npm -v

初始化npm 生成package.json文件
npm init

安装react模块，并且在package.json中添加依赖
npm install react --save-dev

全局安装webpack -g 的目的是要使用webpack指令
sudo(ma需要加sudo) npm install webpack -g

在package.json中添加webpack依赖
npm install webpack --save-dev

把index.js打包成build.js 文件(build和build.js是webpack自动生成的)
webpack app/index.js build/build.js

webpack默认只能加载.js文件，当需要加载.css文件时，需要安装相关的加载器loader(文件类型-loader)
npm install css-loader style-loader --save-dev

修改代码后， 要重新打包
webpack app/index.js build/build.js

建立webpack.config.js完毕， 使用
webpack

启动服务
webpack-dev-server
//备注，可能启动失败，原因是port默认的8080被占用，解决方案：
修改端口号
webpack-dev-server --port 8081

注：webpack生成的虚拟node后台环境安装在了硬盘存储空间中，而不是安装在项目文件下
启动服务后，编辑代码时，后台会自动更新

2017-06-15_111426.png

出现这个就是正常了。

项目文件目录（自动生成的文件node_modules,build,package.json,其余的都是都根据自己的需要新建）

2017-06-15_125606.png

入口文件index.html，如下：

2017-06-15_125847.png

webpack配置文件webpack.config.js,如下：

2017-06-15_130302.png

模块导入文件index.js,可以将设置好的导入模块导入到此文件内，添加到页面上，（例子中分别导入了三个模块，one.js文件里的字符串，reset.css样式和base.css样式，）如下：

2017-06-15_130611.png

其中one.js文件，将“时间滚蛋”作为模块导出，如下：

2017-06-15_130958.png

reset.css文件，将样式作为模块导出，如下：

2017-06-15_131205.png

base.css文件，将样式作为模块导出，如下：

2017-06-15_131335.png

建立webpack.config.js完毕， 使用
webpack

启动服务
webpack-dev-server
在终端运行上述两端代码之后，出现的效果，如下：

2017-06-15_131454.png