webpack的入门教程-蚊子前端博客

webpack 在官方网站中是这么定义的。webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

在 webpack 中，一切皆资源，CSS、JS、图片等都可以作为资源处理。webpack 在配置大型项目时，可能会很大很复杂的配置，这里我们就从简单的 2-3 个页面的配置开始说起。

1. 简单的配置 #

如果之前用过 gulp 处理过前端资源，那么使用 webpack 就相对来说比较简单一些。要使用 webpack 的话，首先要在项目目录中安装 webpack，其他的我们稍后再安装:

npm install webpack --save-dev

webpack 的配置要在根目录的 webpack.config.js 里，我们先来看下简单基本的配置：

var webpack = require("webpack");

module.exports = {
  // 入口文件，可写多个
  entry: {
    entry: "./src/entry.js",
  },

  // 输出出口
  output: {
    path: __dirname + "/out/", // 输出目录
    filename: "[name].js", // 输出的文件名称规则， [name]表示上面entry中的key值（main）
  },

  module: {
    // loader操作各种资源
    loaders: [
      {
        test: /\.css$/, // 匹配到.css文件
        // 用css-loader与style-loader处理匹配到的文件，从右向左执行
        loader: "style-loader!css-loader",
      },
    ],
  },
};

用上面的配置的话，还需要安装css-loader和style-loader:

npm install css-loader style-loader --save-dev

安装后，我们再配置一个简单的目录：


`-out
`-src
  `---css
  `---img
  `---js
  `-entry.js
`-package.json
`-webpack.config.js
`-index.html

好了，我们编写 css 和 js 了。

在 css 目录中，我们创建一个 index.css:

.main {
  background: #ccc;
  width: 400px;
  height: 400px;
}

在 js 目录中，我们创建一个 index.js：

function getTime() {
  console.log(Date.now());
}

exports.getTime = getTime;

在 entry.js 中：

require("./css/index.css");

import o from "./js/index.js";

console.log(o.getTime());

执行命令：

$ webpack -p

在 index.html 中引入./out/entry.js:

<div class="main"></div>
<script type="text/javascript" src="./out/entry.js"></script>

打开 index.html 就能看到效果了。

2. webpack 讲解 #

在 webpack.config.js 中：

entry 可以有多个入口，来对应多个页面，比如我还有一个分享页面：

entry : {
	entry : './src/entry.js',
	share : './src/share.js'
}

在新页面中，引入./out/share.js即可。

loader 是从右往左开始执行的，先执行 css-loader，再执行 style-loader。 css-loader 用来解析 css; style-loader 是将 css 样式用 style 标签插入页面的 head 里。而且在引入 loader 时，可以直接省略-loader：

module: {
  loaders: [
    {
      test: /\.css$/,
      loader: "style!css",
    },
  ];
}

在满足基本的配置后，我们需要满足更多的需求，比如我要用 SASS 编写 css，我要用 ES6 写 js，处理 CSS 中的图片等等。那么我们就得对 webpack.config.js 扩充配置：

$ npm install sass-loader url-loader file-loader babel-loader --save-dev

配置文件 webpack.config.js：

output : {
	path : __dirname+'/out/', // 输出目录
	filename : '[name].js',
	publicPath : __dirname+'/out/' // 图片路径
}
module : {
	loaders : [
		{
			test : /\.css$/,
			loader : 'style!css'
		},
		{
			test: /\.(jpg|png)$/,
			loader: "url?limit=8192"
		},
        {
        	test: /\.scss$/,
        	loader: "style!css!sass"
        },
        {
        	test: /\.js$/,
        	loader: "babel"
        }
	]
}

好了，现在可以使用 sass, es6 了！

2.1 使用 ES6 #

在./js/index.js 中：

// ./src/js/index.js

class Student {
  constructor(name = "") {
    this.name = name;
  }
  sayHello() {
    console.log(`hello, ${this.name}!`);
  }
}

var wenzi = new Student("wenzi");
wenzi.sayHello();

2.2 独立的 CSS 文件 #

目前页面中的样式，是从 js 里加载的。如果我们想要把 css 独立到一个单独的文件中，就需要一个extract-text-webpack-plugin插件了:

npm install extract-text-webpack-plugin --save-dev

webpack.config.js 中：

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins: [new webpack.BannerPlugin("created at " + new Date().toLocaleString()), new ExtractTextPlugin("[name].css")];

name 就是 entry 中的 key 值。

3. 命令行 #

刚才上面我们用的webpack -p来编译的，这里还有几个命令也可以使用：

# webpack 命令行的几种基本命令

$ webpack --config XXX.js  # 使用另一份配置文件（比如webpack.config2.js）来打包
$ webpack -w # 提供watch方法，实时进行打包更新
$ webpack -p # 对打包后的文件进行压缩，提供production
$ webpack -d # 提供source map，方便调试。

使用webpack --watch可以监控文件变化，实时编译；在要发布到线上时，使用webpack -p编译为压缩版本的文件。

4. 总结 #

关于 webpack 的内容依然还有很多，这里我们仅仅是做了一些入门的讲解。更多的内容可以查看官网。后续我们也会讲解 webpack 的高级应用等