webpack1 新手入门教程

本文github仓库地址: https://github.com/Rynxiao/webpack-tutorial ，里面包括了本教程的所有代码。

【如果你觉得这篇文章写得不错，麻烦给本仓库一颗星:-D】

1. 导语

1.1 什么叫做webpack

webpack is a module bundler.
webpack takes modules with dependencies and generates static assets representing those modules.

简单的概括就是：webpack是一个模块打包工具，处理模块之间的依赖同时生成对应模块的静态资源。

1.2 webpack可以做一些什么事情

图中已经很清楚的反应了几个信息：

• webpack把项目中所有的静态文件都看作一个模块
• 模快之间存在着一些列的依赖
• 多页面的静态资源生成(打包之后生成多个静态文件，涉及到代码拆分)

2. webpack安装

• 全局安装(供全局调用：如webpack --config webpack.config.js)

npm install -g webpack

• 项目安装

npm install webpack

// 处理类似如下调用
import webpack from "webpack";
var webpack = require("webpack");

建议安装淘宝的npm镜像，这样下载npm包会快上很多，具体做法：

// 方式一
npm install xx --registry=https://registry.npm.taobao.org/

// 方式二:安装淘宝提供的npm工具
npm install -g cnpm
cnpm install xx

// 方式三
// 在用户主目录下，找到.npmrc文件，加上下面这段配置
registry=https://registry.npm.taobao.org/

3. webpack的基本配置

创建配置文件(webpack.config.js，执行webpack命令的时候，默认会执行这个文件)

module.export = {
	entry : 'app.js',
	output : {
		path : 'assets/',
		filename : '[name].bundle.js'
	},
	module : {
		loaders : [
			// 使用babel-loader解析js或者jsx模块
			{ test : /\.js|\.jsx$/, loader : 'babel' },
			// 使用css-loader解析css模块
			{ test : /\.css$/, loader : 'style!css' },
			// or another way
			{ test : /\.css$/, loader : ['style', 'css'] }
		]
	}
};

说明一： webpack.config.js默认输出一个webpack的配置文件，与CLI方式调用相同，只是更加简便
说明二： 执行webpack命令即可以运行配置，先决条件，全局安装webpack，项目安装各模块loader
说明三： entry对应需要打包的入口js文件，output对应输出的目录以及文件名，module中的loaders对应解析各个模块时需要的加载器

一个简单的例子

basic/app.js

require('./app.css');
document.getElementById('container').textContent = 'APP';

basic/app.css

* {
    margin: 0;
    padding: 0;
}
#container {
    margin: 50px auto;
    width: 50%;
    height: 200px;
    line-height: 200px;
    border-radius: 5px;
    box-shadow: 0 0 .5em #000;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}

basic/webpack.config.js

/**
 * webpack打包配置文件
 */

module.exports = {
	// 如果你有多个入口js,需要打包在一个文件中,那么你可以这么写 
	// entry : ['./app1.js', './app2.js']
    entry : './app.js',
    output : {
        path : './assets/',
        filename : '[name].bundle.js'
    },
    module : {
        loaders : [
            { test : /\.js$/, loader : 'babel' },
            { test : /\.css$/, loader : 'style!css' }
        ]
    }
};

basic/index.html

在basic文件夹执行webpack，打包信息如下

生成main.bundle.js文件，chunk名称为main，也是webpack默认生成的chunk名

4. webapck常用到的各点拆分

4.1 entry相关

4.1.1webpack的多入口配置

上例的简单配置中，只有一个入口文件，那么如果对应于一个页面需要加载多个打包文件或者多个页面想同时引入对应的打包文件的时候，应该怎么做？

entry : {
	app1 : './app1.js',
	app2 : './app2.js'
}

在multi-entry文件夹执行webpack，打包信息如下

可见生成了两个入口文件，以及各自对应的chunk名

4.2 output相关

4.2.1 output.publicPath

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

引用一段官网的话：

The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed

执行打包后，效果如下：

---

4.4.2 resolve.extensions

resolve : {
    extensions: ["", ".webpack.js", ".web.js", ".js", ".less"]
}

这项配置的作用是自动加上文件的扩展名，比如你有如下代码：

require('style.less');

var app = require('./app.js');

那么加上这项配置之后，你可以写成：

require('style');

var app = require('./app');

---

4.5 externals

当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：

//webpack.config.js
module.exports = {
    externals: {
      'react': 'React'
    },
    //...
}

externals对象的key是给require时用的，比如require('react')，对象的value表示的是如何在global（即window）中访问到该对象，这里是window.React。

同理jquery的话就可以这样写：'jquery': 'jQuery'，那么require('jquery')即可。

HTML中注意引入顺序即可：

// 运行
node server.js

// 浏览器输入：localhost:8080

---

5.7 让wepack.config.js支持es6写法

// 1. 安装babel-core、babel-preset-es2015以及babel-loader

// 2. 项目根目录下配置.babelrc文件
{
  "presets": ["es2015"]
}

// 3. 将webpack.config.js重新命名为webpack.config.babel.js

// 4.运行webpack --config webpack.config.babel.js

// 说明node 版本5.0以上，babel-core版本6以上需要如此配置

这是一个 Webpack 支持，但文档里完全没有提到的特性 （应该马上就会加上）。只要你把配置文件命名成 webpack.config.[loader].js ，Webpack 就会用相应的 loader 去转换一遍配置文件。所以要使用这个方法，你需要安装 babel-loader 和 babel-core 两个包。记住你不需要完整的 babel 包。

其他办法(未成功)

1.在上述的方案中，其实不需要重新命名就可以直接运行webpack，但是今天试了一直不成功
2.{ 
	test : /\.js|jsx$/, 
	loader : 'babel',
	query: {
          //添加两个presents 使用这两种presets处理js或者jsx文件
          presets: ['es2015', 'react']
    } 
}

6.相关链接

webpack官方网站

用 ES6 编写 Webpack 的配置文件

一小时包教会 —— webpack 入门指南

Webpack傻瓜式指南（一）

前端模块化工具-webpack

如何开发一个 Webpack Loader ( 一 )

关于externals解释

webpack使用优化

http://webpack.github.io/docs/installation.html

https://github.com/petehunt/webpack-howto