webpack超初级教学

我是跟着这个学的http://www.jianshu.com/p/42e1...，这个文有些东西是webpack1.0的东西，我在个人超初级教程进行了部分更改，有什么错误但愿你们指出。
首先在全局进行安装

npm install -g webpack

安装到项目目录

npm install --save-dev webpack

初始化一个package.json文件，能够在其中写入项目依赖模块，以及自定义脚本任务。

npm init

根据教程给的例子一共建立两个文件夹
app文件夹---存放一个main.js做为入口文件，主要调用其余的js模块，其余js均做为模块存在
模块化写法通常为module exports=function（）{}用来暴露函数 也能够当作一个对象进行暴露，模块化引入能够用require来将模块引入，须要实例化执行函数 puclic文件夹---存放index.html做为网页显示，继续在控制台执行webpack命令：

webpack  ./app/main.js(入口文件) ./public/bundle.js(打包出来的文件)

如今打开public文件夹会发现多一个bundle.js index.html引入bundle.js就会执行你在app文件夹下的js文件命令了
以上为webpack低级用法

利用webpack配置文件进行文件打包操做以及写入插件和加载器。
建立文件：webpack.config.js 前端工做者通常会用config.js进行配置，好比最近的项目须要针对不一样的危险级别进行颜色配置，咱们能够在color.config.js这样写一个对象

colorConfig：{sample：“green”，warn：‘yellow’，‘danger’：‘red’}

当咱们引入配置文件后，能够从后台拿到sample，warn，danger这三个字段，咱们统一用

colordata表示，这时候咱们就能够给咱们须要的字段添加style颜色 id.style.fontSize=colorConfig[colordata]

回到webpack，webpack的配置文件则比我写的功能多得多，首先将配置内容进行暴露

module.exports  = {
   entry:__dirname+"/app/main.js"， //须要打包时的入口文件
   output: {
           path:__dirname+"/public",//输出路径__dirname指的是当前配置文件的绝对路径，是一个node.js的变量
         filename:"bundle.js"//输出文件名
   }
}

将写好的配置文件置于根目录下，控制台执行webpack命令,执行后，webpack会直接解读配置文件暴露出来的对象，并

且自动打包在public目录下生成bundle.js

利用npm start命令更便捷的操做webpack，npm主要是针对package.json中写入的命令进行解析执行的，因此咱们开始

学习一些简单的命令，写入package.json中
（1）用npm start代替webpack命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "start":"webpack"//只须要写入这句就能够啦
  },

start是一个特殊的命令，若是想用其余代替start，好比npm go那么须要写成npm run go

webpack强大的功能出现！！！
一·Source Maps (资源轮询?)可让编译后的文件可读性更高。
首先须要注意的是，只要关于webpack操做的都添加到webpack配置文件中，不要把package.json与config搞混
二. webpack server 构建webpack服务器，实时监测你的代码
这是一个插件，因此须要npm来下载到你的module中
命令行执行命令:npm install --save-dev webpack-dev-server
若是运行出错，有两处最有可能出现的错误，其中一个是在package.js中，看看是否忘记增长逗号，另外一个错误就是

执行命令是否写错。
下载有些慢，须要等待，这时候咱们能够阅读下devServer的api，在配置文件下写入

devServer:{
        contentBase:"./public",//本地服务器加载的页面所在的目录
        historyApiFallback:true,//不跳转
        inline:true//实时刷新
    }

最后运行下npm start 试试新加入的功能，为何个人打开浏览器localhost:8080很差用！！！！咱们先无论，下一

步先，
我今天知道啦：因为咱们是用npm start来执行webpack打包，因此咱们须要在package.json里面

将“start”:"webpack"加点料 “start”：“webpack-dev-server --inline”我让咱们试一下、、
哈哈 成功了
三·loaders继续
Loaders听说是webpack最牛的功能------=之一。主要功能是将es6,7，或者scss，sass都转成浏览器能够识别的文件
Loaders须要单独安装，而且在配置文件的module关键字下配置。
教程中给了一个转换json的loader
首先控制台下载安装npm install --save-dev json-loader
而后在配置文件的module下添加

loaders：[
   {
       test:/\.json$/,
       loader:"json"
    }
]

只要点击保存，页面也会随之变化。
下面教程说的是关于react的，我只弄过vue，我的感受Vue更简单，建立一个Vue脚手架项目只有四个命令

1你得有node
2npm install -g vue-cli
3vue init webpack yourprojectname
4cd yourprojectname
5npm install
6npm run dev

开发起来很简单，我的感受比react容易的多
略过恶心人的Babel让咱们接着看看他的教程，他讲的都是react，我依然推荐vue，哈哈哈。
额，后面讲的东西若是你使用Vue脚手架的话，我的感受这篇文章学习一下就ok了。
github仓库地址：https://github.com/kindLee-al...