webpack安装配置使用教程详解

www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载
本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧，这篇文章对于不喜欢使用 jspm测试的朋友可以参考一下。
 

webpack 入门

目录

1 安装 webpack
2 初始化项目
3 webpack 配置
4 自动刷新
5 第三方库
6 模块化
7 打包、构建
8 webpack 模板
我最近大量使用的是 jspm，但因为用它搭建的前端开发环境中，写测试代码非常困难，而项目又需要写测试，所以决定先试试 webpack。

安装 webpack
webpack 是一个 npm 包，所以我们通过 npm 命令来全局安装：

npm install webpack -g
安装完成后，命令行下就有 webpack 命令可用，执行 webpack --help 可以查看 webpack 提供的各种命令。

初始化项目
grunt.js 一类工具可以借助 yeoman 来初始化项目，目前我并没有看到 webpack 有类似方法，所以当 node.js 项目来初始化。

npm init 创建一个 package.json 文件
npm install webpack --save-dev 在当前目录下安装局域的 webpack
完成以上两个步骤后，我们的项目下有一个 package.json 文件，一个 node_modules 文件夹，我们还需要一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 教程</title>
</head>
<body>
</body>
</html>
webpack 配置
我们的代码将组织在 JavaScript 模块中，项目会有一个入口（entry）文件，比如 main.js，我们需要通过 webpack 的配置文件指明它的位置。

在根目录新建一个 webpack.config.js 文件，添加如下内容：

module.exports = {
  entry: './main.js'
};
因为我们在项目部署前需要打包合并 js 文件，所以还需要在 webpack.config.js 中配置一个 output：

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}
output 定义我们打包出来的文件位置及名称。

完成以上后，试着在项目根目录下执行 webpack 命令，我们的根目录下会多出一个 bundle.js 文件：

webpack build
自动刷新
到现在为止，我们还没在浏览器中打开 index.html 文件，实际上，我们连 bundle.js 文件都还没加入 index.html 文件中。现在且先加入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 教程</title>
</head>
<body>
  <script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 -->
</body>
</html>
这是 webpack 异于其它工具的地方，它在 HTML 文件中直接引用了 build 后的 js 文件，而不是原始的 main.js 文件。这就会有几个问题：

Q: main.js 或它所引用的模块的变化如何实时编译到 bundle.js？

A: 非常简单，在根目录下执行 webpack --watch 就可以监控文件变化并实时编译了

Q: 上面只是实时编译了 js 文件，我们该如何把变化同步到浏览器页面上，实现实时刷新？

A: webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决上面一个问题。

​

安装 webpack-dev-server

执行 npm install webpack-dev-server -g 在全局环境中安装 webpack-dev-server
在项目根目录下执行命令：

$ webpack-dev-server
这样，我们就可以在默认的 http://localhost:8080 网址上打开我们的项目文件了。

此时，我们可能会认为，

js 文件修改
webpack-dev-server 监控到变化
webpack 重新编译
实时更新浏览器中的页面
但不幸的是，我们「自以为是」了。http://localhost:8080 这个网站对 js 文件的变化无动于衷。

我们可以启用 webpack-dev-server 的 hot 模式，在代码中插入如下一行：

<script src="http://localhost:8080/webpack-dev-server.js"></script>
这样 http://localhost:8080/ 这个网址也可以根据 js 的变化相应地自动刷新了。

第三方库
webpack 并不是包管理器，所以如果我们要使用第三方库，则需要借助 npm 或其它工具。比如，在项目里安装 jQuery：

npm install jquery --save
模块化
webpack 自称 module bundler，在它的定义中，CSS、图片、文件等等，都可以通过相应的 loader 加载，变成 JavaScript模块，以下具体展开说明。

模块化 JavaScript

如果我想使用 ES6 的方式引入某个 es6 模块，比如：

import $ from 'whatever';
怎么办？浏览器并不提供原生支持，webpack 通过各种 loader 来解决这类问题。比如这 ES6 的语法，可以借助 babel-loader：

安装 babel-loader

npm install --save-dev babel-loader
配置 webpack.config.js

在 module.exports 值中添加 module：

module.exports = {
entry: {
    app: ['webpack/hot/dev-server', './main.js']
},
output: {
    filename: 'bundle.js'
},
module: {
    loaders: [
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
}
}

这样我们就可以在我们的 js 文件中使用 ES6 语法，babel-loader 会负责编译。

上面的方法，是在 webpack.config.js 文件中定义某一类型文件的加载器，我们也可以在代码中直接指定：

import $ from 'babel!whatever'
因为 babel-loader 允许我们使用 ES6 语法，于是我们的模块完全可以用 ES6 的 module 来组织代码： export 一个简单的模块：

// script/log.js 文件
export default (param) => {
    console.log('你好啊', param);
}
然后在 main.js 中导入使用：

// main.js 文件
import log from "./script/log.js";
CSS 加载器

我们可以按传统方法使用 CSS，即在 HTML 文件中添加：

<link rel="stylesheet" href="style/app.css">
但 webpack 里，CSS 同样可以模块化，然后使用 import 导入。

因此我们不再使用 link 标签来引用 CSS，而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 <style></style> 标签插入 <head> 头部，后者负责解读、加载 CSS 文件。

安装 CSS 相关的加载器

npm install style-loader css-loader --save-dev
配置 webpack.config.js 文件

{
// ...
module: {
    loaders: [
        { test: /\.css$/, loaders: ['style', 'css'] }
    ]
}
}
在 main.js 文件中引入 css

import'./style/app.css';
重启 webpack-dev-server

模块化 CSS

上一步里，我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 类打包时是 export 到全局环境的，也就是说，我们只是换了种加载 CSS 的方式，在书写 CSS 的时候，还是需要注意使用命名规范，比如 BEM，否则全局环境 CSS 类的冲突等问题不会消失。

这里，webpack 做了一个模块化 CSS 的尝试，真正意思上的「模块化」，即 CSS 类不会泄露到全局环境中，而只会定义在 UI 模块内 – 比如 react.js 这类模块，或者 web components。类似的尝试还有 ember-component-css 与 jspm 的 plugin css。

autoprefixer

我们在书写 CSS 时，按规范写，构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀，webpack 同样是通过 loader 提供该功能。

安装 autoprefixer-loader

npm install autoprefixer-loader --save-dev
配置 webpack.config.js

loaders: [{
loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
//...
}]
重启 webpack-dev-server

假如我们在 CSS 中写了 body { display: flex; } 规则，再查看 bundle.js 文件的话，我们能看到类似如下的代码：

body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}
图片

图片同样可是是模块，但使用的是 file loader 或者 url loader，后者会根据定义的大小范围来判断是否使用 data url。

import loadingIMG from 'file!../img/loading.gif'

React.render(<img src={loadingIMG} />, document.getElementById('app'));
打包、构建
项目结束后，代码要压缩、混淆、合并等，只需要在命令行执行：

webpack
即可，webpack 根据 webpack.config.js 文件中的配置路径、构建文件名生成相应的文件。

webpack 模板
上面说的是一步一步使用 webpack 搭建开发环境，当然，实际应用中，大可以借用一些模板，比如 react hot boilerplate 这样的库。

webpack安装配置使用教程详解的更多相关文章

  1. Linux中redis安装配置及使用详解

    Linux中redis安装配置及使用详解 一. Redis基本知识 1.Redis 的数据类型 字符串 , 列表 (lists) , 集合 (sets) , 有序集合 (sorts sets) , 哈 ...

  2. Ubuntu下安装JDK图文教程详解 jdk-java6-30 .bin 的处理方法

    Ubuntu下安装JDK图文教程详解 jdk-java6-30 .bin 的处理方法: https://blog.csdn.net/mingjie1212/article/details/485250 ...

  3. FastDFS分布式文件系统&Nginx负载均衡最小环境安装配置［超级详解］

    1.背景 FastDFS 是一款开源的.分布式文件系统(Distributed File System),由淘宝开发平台部资深架构师余庆开发.该开源项目的主页是 http://code.google. ...

  4. CentOS 7.4下源码编译安装配置LAMP环境详解

    CentOS 7.4搭建LAMP,LAMP:Linux.Apache.MySQL.PHP. 目录:第一部分 准备工作第二部分 安装Apache服务第三部分 安装MySQL服务第四部分 搭建PHP运行环 ...

  5. 安装配置Xdebug模块详解

    1.XDebug安装配置 (1)下载XDebug下载地址:http://www.xdebug.org/必须下载跟机器上安装的php匹配的版本才行.具体下载方法如下:将phpinfo网页的源代码拷贝到h ...

  6. Git的安装和使用教程详解

    ---恢复内容开始--- 本篇笔记聊聊Git的安装和使用教程 一.认 识 Git                                                            ...

  7. pureftpd安装配置-pureftp参数详解（一）

    1. 下载 #cd /usr/local/src/ #wget ftp://ftp.pureftpd.org/pub/pure-ftpd/releases/pure-ftpd-1.0.30.tar.g ...

  8. 【新技术】CentOS系统下docker的安装配置及使用详解

    1 docker简介    Docker 提供了一个可以运行你的应用程序的封套(envelope),或者说容器.它原本是dotCloud 启动的一个业余项目,并在前些时候开源了.它吸引了大量的关注和讨 ...

  9. [转载]Docker的安装配置及使用详解

    简介    官网:http://www.docker.com/,点击get started进入下载,目前三个系统的docker容器都有,Windows版需要win10系统,我的是win7系统一开始用的 ...

随机推荐

  1. iOS- 详解文本属性Attributes

    1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont systemFontOfSize:_fontS ...

  2. NET MVC1项目升级到MVC2最简单的方法

    NET MVC1项目升级到MVC2最简单的方法 把MVC1项目升级到MVC2,最简单的做法如下: 新建MVC2项目 新建一个MVC2项目,把原来MVC1的项目文件全部拷贝到新建MVC2项目目录里,依照 ...

  3. TortoiseGit安装与配置

    TortoiseGit 简称 tgit, 中文名海龟Git. 海龟Git只支持神器 Windows 系统, 有一个前辈海龟SVN, TortoiseSVN和TortoiseGit都是非常优秀的开源的版 ...

  4. iOS静态库和动态库的区别

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系统动态加载到内存,供程序调用 ...

  5. SqlSever基础 datediff 计算两个时间相差多少年份

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  6. ruby学习总结03

    1.方法的调用 对象.方法名(参数1,参数2,...)     可以省略参数列表的() 对象.方法名(参数1,...) do |变量1,变量2,...|            可以省略参数的() 块内 ...

  7. firefox渗透师必备的利器

    工欲善必先利其器,firefox一直是各位渗透师必备的利器,小编这里推荐34款firefox渗透测试辅助插件,其中包含渗透测试.信息收集.代理.加密解密等功能. 1:Firebug Firefox的 ...

  8. java使用方法总结

    第一章 字符串 . 获取字符串的长度: length() . 判断字符串的前缀或后缀与已知字符串是否相同 前缀 startsWith(String s) .后缀 endsWith(String s) ...

  9. Hibernate 对象的三种状态

    hibernate对象的三种状态: (一) 瞬时(临时)状态:   对象被创建时的状态,数据库里面没有与之对应的记录! (二) 持久状态:   处于session的管理中,并且数据库里面存在与之对应的 ...

  10. 流媒体基础实践之——RTMP直播推流

    一.RTMP推流:用户可将RTMP视频流推送到阿麦提供的打流地址.地址格式类似于: rtmp://livepush.myqcloud.com/live 现在可以支持哪些直播源?和那些直播软件?推流参数 ...