webpack~

　　呼呼...终于考完试了，好久没有更新博客了，感觉这里荒草丛生了，虽然知道没什么人看我的文章但还是很想更啊...

虽说一直是在准备期末考试，但还是有一直在学前端的新技术哒，只是一直没什么时间写，接下来我会陆陆续续把我学到的有趣东西记录到这里来~

 

1 对webpack的认识（webpack能解决什么问题）

一直都是写html，然后写css和js，然后各种link和script一进来，也没觉得有什么不妥，所以刚接触webpack各种晕啊，但没办法，前端工程化是潮流嘛~

webpack能解决的问题：

　　*可以像写nodejs一样，在前端中对js文件各种exports和require，还有css，和图片也是被当作模块来加载的，是不是挺酷的...

　　*可以通过加载器对sass文件啊，coffeescript啊，jsx啊，ES6啊等自动执行转译...

　　*各种打包压缩...

 

2 webpack的语法（怎么用）

（1）webpack是npm包下的一个包，所以可以通过 npm install webpack -g 来全局安装，一般工具类的都是全局来安装的...

（2）配置文件webpack.config.js，这是我在一个简单的项目中的配置：

需要重点说一下就是entry是用来声明入口文件的，入口文件通俗点说就是在里面各种require js和require css，像这样：

然后各种加载器（loader）就会通过匹配文件的后缀名对它们进行各种转译，紧接着会把这些文件捆绑成一个文件，指定output就是用来指定捆绑后的文件的存放位置的。

比如我在这里指定了捆绑后的文件的文件名为bundle.js，创建一个名为out的文件夹，把它存放在里面，嗯接下来就可以在html里面通过

<script src="./out/bundle.js"></script>

引入你之前require的所有文件，各种css，js啊都被捆绑成一个bundle.js文件然后被引用...

上面说到的加载器，需要我们去通过npm下载相应的依赖，比方说babel-loader，当webpack检测到.js或.jsx后缀或者ES2015的时候，它会帮我们调用babel来转译它们，

但是babel不是webpack自己有的，我们要自己去下载。新版的babel被分成babel-core和babel-cli，这里我们只需要babel-core就行，这是我的package.json文件：

{
  "name": "tureLove",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "ejs": "~2.3.3",
    "express": "~4.13.1",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.11"
  },
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1 ",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^1.14.1"
  }
}

你可以把它复制过去作为你的package.json文件，再npm install一键安装就行，也可以像下面这样单独安装（不全，根据需要选择安装就行）：

npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

相应的加载器，依赖安装完之后，把需要转译打包的文件放在入口文件那里，在命令行输入 webpack -w ，自动帮你做好工作。

上面举的例子是比较简单的，再复杂点的会有多个入口文件，这时候你可以把入口文件写出这个样子：

entry: {
    page1: "entry.js",
    page2: "entry2.js"
},
output: {
    path: path.join(__dirname, 'out'),
    publicPath: "./out/",
    filename: '[name].js'
}

将会被捆绑成两个文件page1.js和page2.js...

3 注意

##webpack的各种加载器本身是不具备各种转译功能的，比如babel加载器，它自己是不能转译jsx文件或者es6的，但是当它检测到jsx或者es6代码的存在的时候，会帮你去调用babel-core还有相应的预设来转译它们。

##如果你是windows系统，因为不像mac并不自带ruby环境，所以sass是转译不了的，webpack会提示你缺少node-sass模块，你也不需要去大费周章的装ruby环境，

直接 npm install node-sass --save-dev 把node-sass作为开发依赖安装即可。