漂流记
漂流记

webpack 入门

什么是 webpack？

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但这不用我们理会，因为 webpack 有着各种健全的加载器（loader）在处理这些事情。

为什么要使用 webpack？

很简单的一个道理，难道写react的同学会不用它么？

 安装

首先你需要安装有node(我的版本为v5.4.1)，然后执行

$ npm install webpack -g

当然如果常规项目把依赖写入 package.json 包更好：

$ npm init

$ npm install webpack --save-dev

 

我们在项目的根目录中的package.json 可以看到：（其它包根据你的项目需要另外安装）

 

复制代码 
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "demo",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "RORO彦",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.6"
  },
  "devDependencies": {
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.11.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "jsx-loader": "^0.13.2",
    "node-libs-browser": "^1.0.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7"
  }
}
复制代码

 

 

 

 

配置文件

创建我们webpack的配置文件webpack.config.js：（这个文件需要手码的哦）

复制代码 
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    entry: "./main.js",
    output: {
        path: './build', // 图片和 JS 会打包到这里来
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },

            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, // 用 ! 来连接多个 loader

            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            } // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL

        ]
    },
    resolve: {
        extensions: ['', '.js', '.json', 'coffee']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]

}
复制代码

对这个配置文件解释下：

1) entry：entry可以是个字符串或数组或者是对象。指定打包的入口文件，一个键值对，就是一个入口文件

2) output：包结果文件的名称,在这里我指定它在./build的文件夹打包输出

3) resolve：用于指明程序自动补全识别哪些后缀,
     注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.

4) module：以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

   1.js的引用

   比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装

   2.样式及图片的引用

require('./bootstrap.css'); require('./myapp.sass'); var img = document.createElement('img'); img.src = require('./glyph.png');

当你引用 CSS(或者 SASS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个