webpack 入门踩坑

参考来源：知乎张轩

安装

先装好node和npm，由于webpack是一个基于node的项目。而后

 

npm install -g webpack 全局安装

还能够在当前项目里面也安装一个webpack, 这也是官方推荐的作法

npm install webpack --save-dev

总览

官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各类文件打包成一系列的静态资源。 请看下图

webpack简单点来讲就就是一个配置文件，全部的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块

• entry 入口文件 让webpack用哪一个文件做为项目的入口
• output 出口 让webpack把处理完成的文件放在哪里
• module 模块 要用什么不一样的模块来处理各类类型的文件

下面咱们就一步一步来新建一个简单的项目

创建项目

建一个文件夹，而后新建一个package.json的文件在项目根目录下

 

mkdir webpack
cd webpack npm init # 一直点回车 若是懒得填一些信息 

若是你使用git管理你的这个项目的话，建议你新建一个.gitignore文件，不要让git提交一些node依赖的模块， 你也能够参考github的例子 gitignore/Node.gitignore at master · github/gitignore · GitHub

咱们这里就简单一点

 

node_modules  （npmnode_modules）

 

项目结构

如今项目里面就有一个package.json， 咱们多加一点东西，慢慢丰富它的内容。

• /app
  • index.js
  • sub.js
• package.json
• webpack.config.js

添加了两个js文件，添加了最重要的webpack的配置文件，咱们仍是从很是简单的hello world开始玩起，webpack原生直接支持AMD和CommonJS两种格式，若是你想使用ES6的风格，这点之后再提。

JS代码

sub.js

 

//咱们这里使用CommonJS的风格 function generateText() { var element = document.createElement('h2'); element.innerHTML = "Hello h2 world"; return element; } module.exports = generateText; 

index.js

 

var sub = require('./sub'); var app = document.createElement('div'); app.innerHTML = '<h1>Hello World</h1>'; app.appendChild(sub()); document.body.appendChild(app); 

代码写完了，完成一个很简单的功能，新建一个单独的module，而且在另一个module里面引用他，最后会在页面里面输出两个标题。

配置Webpack

如今开始配置webpack，目标是把这两个js文件合并成一个文件. 咱们能够本身在build文件夹里面手动建一个index.html文件夹，而后再把合并之后的js引用在里面，可是这样有些麻烦，因此咱们这里安装一个plugin，能够自动快速的帮咱们生成HTML。

 

npm install html-webpack-plugin --save-dev

好 有了这个插件 开始写config文件

 

var path = require('path'); var HtmlwebpackPlugin = require('html-webpack-plugin'); //定义了一些文件夹的路径 var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

能够在你的webpack.config.js里面方便的引用webpack

// webpack.config.js var path = require('path'); var webpack = require('webpack'); 

而后在使用一些plugin的时候就比较方便了

new webpack.optimize.CommonsChunkPlugin('common.js')

module.exports = { //项目的文件夹 能够直接用文件夹名称 默认会找index.js 也能够肯定是哪一个文件名字 entry: APP_PATH, //输出的文件名 合并之后的js会命名为bundle.js output: { path: BUILD_PATH, filename: 'bundle.js' }, //添加咱们的插件 会自动生成一个html文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ] }; 

而后在项目根目录运行

 

webpack

终端显示一堆信息，而后告诉你成功了。

（若是显示webpack不是内部命令，则配置系统环境变量 参考连接：http://blog.csdn.net/u013446264/article/details/51114276）

启动cmd，键入以下的命令：

npm config set prefix "d:\nodejs\node_global"
npm config set cache "d:\nodejs\node_cache"

4.修改环境变量：在系统变量中增长NODE_PATH变量（图片来源于上面提到的博文） 

而后在PATH变量中添加一个相同的路径（PS：这里的路径都和第2步配置的路径有关系）；

5.（图片来源于上面提到的博文） 

 

 

你可使用webpack --help看看一些运行的时候可选的参数

你会发现多出来一个build文件夹，直接点开里面的html文件，你会发现咱们可爱的“hello world”已经插入到页面了。咱们的任务完成了，成功生成html，合并js，html引入了js，js被执行了。

配置webpack-dev-server

上面任务虽然完成了，可是咱们要不断运行程序而后查看页面，因此最好新建一个开发服务器，能够serve咱们pack之后的代码，而且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

 

npm install webpack-dev-server --save-dev

安装完毕后 在config中添加配置

 

module.exports = { .... devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, ... } 

而后再package.json里面配置一下运行的命令,npm支持自定义一些命令

 

...
"scripts": { "start": "webpack-dev-server --hot --inline" }, ... 

好了，万事具有了，在项目根目录下输入npm start,一堆花花绿绿的信息后server已经起来了，在浏览器里面输入http://localhost:8080 发现伟大的hello world出现了，在js里面随便修改一些输出而后保存, boom!浏览器自动刷新，新的结果出现了。

拓展阅读 若是你的服务器端使用的是express框架，你还能够直接安装express的middleware，webpack配合express，很好用。

npm install webpack-dev-middleware --save-dev

更多的详情 请参考这篇文章

Using React with Webpack Tutorial

添加CSS样式

如今来添加一些样式，webpack使用loader的方式来处理各类各样的资源，好比说样式文件，咱们须要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到全部的url(...)而且处理。style-loader会把全部的样式插入到你页面的一个style tag中。

安装咱们的loader

 

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

配置loader，在webpack.config.js中

 

devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, ... module: { loaders: [ { test: /\.css$/, loaders: ['style', 'css'], include: APP_PATH } ] }, ... plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ] 

看loaders的书写方式，test里面包含一个正则，包含须要匹配的文件，loaders是一个数组，包含要处理这些程序的loaders，这里咱们用了css和style，注意loaders的处理顺序是从右到左的，这里就是先运行css-loader而后是style-loader.

新建一个样式文件 main.css

 

h1 {
    color: red;
}

记得在入口文件index.js中引用

 

require('./main.css');

而后发现标题变成红色的了，webpack的理念是基于项目处理的，把对应的文件格式给对应的loader处理，而后你就不用管了，它会决定怎么压缩，编译。

那如今想使用一些有爱的css预编译程序，来点sass吧。 你可能已经想到了，再来个loader就行啦，确实是这样简单。

 

npm install sass-loader --save-dev

稍微修改一下config，删掉咱们先前添加的css规则，加上下面的loader

 

{ test: /\.scss$/, loaders: ['style', 'css', 'sass'], include: APP_PATH },


若解析不正确，则使用方案二：

 module: { //加载器配置  loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'jsx-loader?harmony' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] },

添加两个sass文件，variables.scss和main.scss

variables.scss

 

$red: red;

main.scss

 

@import "./variables.scss"; h1 { color: $red; } 

在index.js中引用

 

require('./main.scss');

而后发现标题如愿变红，至关简单吧。

处理图片和其余静态文件

这个和其余同样，也许你也已经会玩了。安装loader，处理文件。诸如图片，字体等等，不过有个神奇的地方它能够根据你的需求将一些图片自动转成base64编码的，为你减轻不少的网络请求。

安装url-loader

 

npm install url-loader --save-dev

配置config文件

 

{ test: /\.(png|jpg)$/, loader: 'url?limit=40000' } 

注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。

下面举个栗子。

新建一个imgs文件夹，往里面添加一张崔叔的照片。在scss文件中添加以下的东西。

 

@import "./variables.scss"; h1 { color: $red; background: url('./imgs/avatar.jpg'); } 

npm start, 而后查看图片的url，发现神奇。

添加第三方库

有的时候还想来点jquery，moment，undersocre之类的库，webpack能够很是容易的作到这一点，有谣言说Bower即将中止开发了, 做者推荐都使用npm来管理依赖。那么咱们如今安装在咱们的app中添加jquery和moment的支持。

 

npm install jquery moment --save-dev

在js中引用

 

var sub = require('./sub');
var $ = require('jquery');
var moment = require('moment');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(sub());
$('body').append('<p>look at me! now is ' + moment().format() + '</p>');

看看浏览器，成功！ jquery和moment如今都起做用了！

添加ES6的支持

若是如今你的项目尚未对ES6的语法支持，那就有点没有逼格了，其实你们都知道这个也很简单，由于咱们有伟大的Babel

首先 装各类loader

 

npm install babel-loader babel-preset-es2015 --save-dev

配置咱们的config文件

 

... { test: /\.jsx?$/, loader: 'babel', include: APP_PATH, query: { presets: ['es2015'] } }, ... 

es2015这个参数是babel的plugin，能够支持各类最新的es6的特性，具体的状况看这个连接。 Babel es2015 plugin

如今咱们能够改掉CommonJS风格的文件了。

sub.js

 

export default function() { var element = document.createElement('h2'); element.innerHTML = "Hello h2 world hahaha"; return element; } 

index.js

 

import './main.scss'; import generateText from './sub'; import $ from 'jquery'; import moment from 'moment'; let app = document.createElement('div'); const myPromise = Promise.resolve(42); myPromise.then((number) => { $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>'); }); app.innerHTML = '<h1>Hello World it</h1>'; document.body.appendChild(app); app.appendChild(generateText()); 

咱们上面测试了import, export，const，let，promise等一系列es6的特性。

最后完美的输出界面。

结语

第一部分到这里结束，通过一系列例子，你应该可以了解webpack最基本的用法了吧。是否已经喜欢上这种简洁的配置了？下一部分咱们会继续讨论一些webpack更高级的用法。

参考文章

SurviveJS - Table of Contents

Introduction