webpack~_html/css_WEB-ITnose

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

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里面通过

引入你之前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": "taobao_web",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "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",    "sass-loader": "^3.1.2",    "style-loader": "^0.13.0",    "url-loader": "^0.5.7"  },  "dependencies": {    "node-sass": "^3.4.2"  }}

你可以把它复制过去作为你的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 注意点...

等我后面想到再补充吧~