webpack操作基础

webpack 是一个前端加载/打包工具，根据模块的依赖关系进行静态分析，并依根据规则生成对应的静态资源

安装温pack之前本地环境必须是已经安装node.js，然后按照下列步骤进行安装

查看本地是否已经安装Node.js

说明已经安装成功 版本是：6.4.1

Mac系统 加sudo

=====安装成功了，我们开始创建项目了

mdkir wpk-test  是创建一个文件夹wpkk-test文件

项目文件夹创建成功

需要绑定或者捆绑文件

新的文件bundle.js 诞生了

bundle里面写个内容，把他通过show来打印出来

---

多文件打包：

只是绑定一个作用不大，如果是很多文件怎么绑定，怎么依赖呢（打包）？下面是打包多个文件：：

 

==>

再打包一下：

再擦启动页面：

打包成功

---

函数打包：

能不能通过函数来打包：（json和函数不一样，函数可以实现功能）

再次打包

打印页面：

通过函数功能来打包

---

样式的打包：

我们引入其他的加载器来打包一下样式文件：

有两种加载器：

css-loader---遍历文件代码：

style-loader--通过style标签引入到head头部部分：

注意下循序：1-style 2-css 如果循序换了就会报错

把样式绑定到js文件里面去：

 

初始化一下整个项目：

再新建一个json文件

新的json文件成功了：

再安装一下加载器：

写样式：

新建css文件：show.js文件

再遍历项目：

---

配置文件：

下面是天剑webpack项目添加webpack.config.js配置

新建src文件：

----整理一下项目文件：

index文件修改

遍历项目：

修改成功：

如果需要改css样式的化  在css文件进行修改，再遍历项目启动就可以了 （cmd 输入:webpack 回车就可以）

---

安装第三方库：

安装成功

---

服务端环境的安装：

json文件添加

HTML文件修改

启动项目 buld

安装-dev-server

通过8081端口打开：

再npm start 进行启动