webpack入门学习笔记

webpack是一个前端模块构建工具，它能够将原本一些有依赖关系的文件（源代码）构建成静态资源。

1.webpack安装

$ npm install webpack -g    //进行全局安装
$ npm install webpack --save-dev  //进行项目本地安装
$ npm install webpack-dev-server --save-dev  //安装webpack-dev-server工具

2.基本工作原理

webpack的基本工作原理是，首先要选定一个入口文件，这个入口文件可能要依赖其他的文件模块（如require了一个其他的模块），而那些被依赖的模块可能又要依赖其他模块，这样一层一层的递推。webpack的作用就是从入口文件开始，将存在依赖关系的各个文件构建成一个静态资源。

在一般的项目开发过程中都有构建过程。一个项目可能的基本项目结构为：首先在src目录下存放开发者编写的源代码，node-modules中存放安装的各个模块，而build目录下存放的就是构建好的资源。webpack的工作过程就是将src中的源代码构建成build下的静态资源。

3.基本使用

比如src目录下存在一个app.js入口文件，而这个文件有依赖于test.js文件，要想将这些源代码构建成一个静态资源app.budle.js文件，只需执行下面的命令：

webpack ./app.js app.budle.js

webpack的第一个参数是入口文件的路径，第二个参数是要构建的文件名，默认情况下构建后的文件在当前目录下。

4.使用webpack.config.js

为了不必每次构建都在命令行中输入大量的代码，可以使用webpack.config.js配置文件。这样每次要进行构建时，只需要执行命令webpack，webpack便会自动对当前目录下的webpack.config.js文件进行解析，从而自动完成构建。

一个基本的webpack.config.js的代码及注释如下：

module.exports = {    
  entry: './src/app.js',   //entry字段指定入口文件
  output: {  //output字段指定构建后的文件
     path: './bin',   //path字段指定构建后文件的位置
     filename: 'app.bundle.js'   //filename字段指定构建后的文件名
  }
};

使用上面的配置文件和在命令行构建效果相同，但是更加方便。

5.使用loader

webpack只能解析JavaScript代码。但是很多时候项目源代码中不只有JavaScript代码，还可能有css样式代码、coffeScript等其他代码，这个时候就需要使用loader加载其他语言的转化模块，将其他代码转换成webpack能够使用的JavaScript代码。

一般的loader命名都是语言名xxx-loader。比如能够将ES6转换成ES5的模块babel，对应的loader名就叫babel-loader。

比如我们要构建的文件中存在.css后缀名的文件，这些文件使用css代码编写的。构建这种项目的时候webpack.config,js文件内容如下：

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }   //匹配.css文件，使用对应的loaders
        ]
    }
};

在loaders字段中指定转换，可以指定多个。这里指定了匹配正则表达式/\.css$/的文件及后缀名为.css的文件，使用css-loader和style-loader进行转换。当然使用之前需要先安装这两个loader：npm install css-loader style-loader

6.webpack-dev-server

webpack-dev-server是一个小型Express服务器，使用webpack-dev-middlerware构建。开发中可以用它来启动一个服务器，更新代码的时候界面会动态的进行重新渲染。