webpack教程

安装 webpack#

我们通过 npm 在全局环境下安装 webpack：

    npm install webpack -g

安装完成后，我们可以使用 webpack 命令，执行

    webpack --help

能够查看 webpack 提供的所有命令。

不过，建议在项目下安装一份局域的 webpack：

    npm install webpack --save-dev

如果觉得 npm 安装太慢，可以尝试 npm 的替代工具 ied – 我的使用经历，它的速度比 npm 快太多了。

初始化项目#

安装好 webpack 后，我们要怎么开始一个项目？

如果你用过 grunt.js、gulpjs 一类工具，它们可以借助 yeoman 来初始化项目。webpack 的情况不太一样，我们可以把它当作 node.js 项目来初始化。当然，借用一些模板会更省事，比如react transform boilerplate。

但这里还是聊聊如何手动初始化一个 webpack 项目。

  1. 创建一个 package.json 文件，用于保存项目版本、依赖关系等

      npm init -y
  2. 在当前目录下安装 webpack 
      npm install webpack --save-dev

这时，我们的项目下有两个内容：

  1. package.json 文件
  2. node_modules 文件夹

我们还需要一个 index.html 文件，示例如下：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>webpack 教程</title>
  </head>
  <body>
  </body>
  </html>

现在，我们可以通过 live-server 等访问到 index.html 页面。

目前页面上还是一片空白，除了一个标题。

webpack 配置#

单页面应用里，项目通常会有一个入口（entry）文件，假设是 main.js，我们通过配置 webpack 来指明它的位置。

首先，在项目根目录新建一个 webpack.config.js，这是 webpack 默认的配置文件名称，添加以下内容：

  module.exports = {
    entry: ‘./main.js‘
  };

尝试在项目根目录执行 webpack，会提示我们，

Output filename not configured.

因为我们只是设定了入口（entry），还没有指定一个输出文件的路径与名称。

在 webpack.config.js 中添加一个 output：

  module.exports = {
      entry: ‘./main.js‘,
      output: {
          path: __dirname, // 输出文件的保存路径
          filename: ‘bundle.js‘ // 输出文件的名称
      }
  }

现在在项目里执行 webpack 命令，我们的根目录下会多出一个 bundle.js 文件：

接下来，在 index.html 中引用 bundle.js 文件：

 <!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 文件直接引用构建后的 js 文件，而不是源文件。

当然，这可能会引发性能问题，毕竟，如果每一点文件修改都会导致整个 bundle.js 文件重新构建的话，碰上大一点的项目，有几千个源文件要编译，编译速度可能很慢。webpack 有它的解决办法，具体参见它的文档。

实时刷新#

在 html 文件中引用 bundle.js 文件后，我们有几个问题需要解决。

  1. main.js 或它所引用的模块的变化如何通知 webpack，重新生成 bundle.js？

    非常简单，在根目录下执行 webpack --watch 就可以监控目录下的文件变化并实时重新构建。

  2. 上面只是实时构建，我们该如何把结果通知给浏览器页面，让 HTML 页面上的 bundle.js 内容保持最新？

    webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决实时构建的问题。

?

安装 webpack-dev-server

  1. 在全局环境中安装 webpack-dev-server：

      npm install webpack-dev-server -g
  2. 在项目根目录下执行命令： 
        $ webpack-dev-server

    这样，我们就可以在默认的 http://localhost:8080 网址上打开我们的 index.html。

此时，我们可能认为事情是按以下顺序发生的，

  1. js 文件修改
  2. webpack-dev-server 监控到变化
  3. webpack 在内存中重新构建 bundle.js
  4. webpack-dev-server 保证页面引用的 bundle.js 文件与内存中一致

但不幸的是，我们「自以为是」了。http://localhost:8080/index.html 对 js 文件的变化无动于衷。

webpack-dev-server 提供了两种模式用于自动刷新页面：

  1. iframe 模式

    我们不访问 http://localhost:8080，而是访问 http://localhost:8080/webpack-dev-server/index.html

  2. inline 模式

    在命令行中指定该模式，webpack-dev-server --inline。这样http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。

webpack-dev-server 还提供了一种 --hot 模式，属于较高阶的应用。

第三方库#

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

  npm install jquery --save

这样我们在当前项目目录下安装了 jQuery，并将它写入 package.json 里的依赖里。

模块化#

模块化 JavaScript

如果我想用 ES6 的方式引入 jQuery 模块，比如：

    import $ from ‘jquery‘

怎么办？浏览器目前还不提供原生支持，webpack 原生也仅支持 CommonJS 的那种写法，但借助 babel-loader ，我们可以加载 es6 模块：

  1. 安装 babel-loader

       npm install babel-loader babel-core babel-preset-es2015 --save-dev
  2. 配置 webpack.config.js

    在 module.exports 值中添加 module：

    module.exports = {
  entry: {
      app: [‘./main.js‘]
  },
  output: {
      filename: ‘bundle.js‘
  },
  module: {
      loaders: [{
          test: /\.js$/,
          loaders: [‘babel?presets[]=es2015‘],
          exclude: /node_modules/
      }]
  }
}

    这样我们就可以在我们的 js 文件中使用 ES6 语法，babel-loader 会负责编译成浏览器可以识别的格式。

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 文件。

  1. 安装 CSS 相关的加载器

      npm install style-loader css-loader --save-dev
  2. 配置 webpack.config.js 文件 
      {
    module: {
        loaders: [
            { test: /\.css$/, loaders: [‘style‘, ‘css‘] }
        ]
    }
  }
  3. 在 main.js 文件中引入 css 
       import‘./style/app.css‘;

这样，在执行 webpack 后，我们的 CSS 文件就会被打包进 bundle.js 文件中，如果不想它们被打包进去，可以使用 extract text 扩展。

模块化 CSS

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

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

autoprefixer

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

  1. 安装 autoprefixer-loader

    npm install autoprefixer-loader --save-dev
  2. 配置 webpack.config.js 
      loaders: [{
    test: /\.css$/,
    loader: ‘style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}‘,
  }]
  3. 重启 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.production.config.js，其中可以做许多代码优化。

时间： 2024-10-12 13:59:37

webpack教程的相关文章

Webpack教程二

Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', ... 这样出错以后就会采用source-map的形式直接显示你出错代码的位置. 配置webpack-dev-server代理 既然常用webpack做React一类的SPA,那么一个典型的例子就是前后端分离.后端是一个RESTful的server不管用什么写的.假定在本机他是类似http://loca

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上) [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下) [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入浅出webpack教程系

自己收藏的较好的webpack 教程

劳 卜的教程               http://www.cnblogs.com/luozhihao/p/6623819.html https://webpack.toobug.net/zh-cn/chapter3/cli-api.html https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/ webpack官方教程     https://doc.webpack-china.org/concepts/

webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目,希望对你有帮助. github地址, 有不错的就更新 官方文档 中文指南  初级教程 webpack-howto 作者:Pete Hunt Webpack 入门指迷 作者:题叶  webpack-demos 作者:ruanyf 一小时包教会 —— webpack 入门指南 作者:VaJoy Larn webpack 入门及实践 作者:zhouweicsu Webpack傻瓜式指南(一) 译者:前端外刊评论 Webpack傻瓜式指南(二) 译者:前端外刊评论

webpack 教程资源目录

初级教程 webpack-howto 作者:Pete HuntWebpack 入门指迷 作者:题叶 webpack-demos 作者:ruanyf一小时包教会 -- webpack 入门指南 作者:VaJoy Larn webpack 入门及实践 作者:zhouweicsu Webpack傻瓜式指南(一) 译者:前端外刊评论 Webpack傻瓜式指南(二) 译者:前端外刊评论 入门Webpack,看这篇就够了 作者:zhangwang webpack入门和实战(一):webpack配置及技巧 作

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install [email protected] --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 2 module.exports = { 3 entry : ['./src/js/main.js', './src/js/

webpack教程(五)——图片的加载

首先安装的依赖 npm install file-loader --save-devnpm install image-webpack-loader --save-devnpm install url-loader --save-dev 在webpack.config.js文件中加入如下配置 在css文件中引入该图片作为背景图片. 运行npm run start 打开浏览器http://localhost:8080/ 看到图片已经引入进来而且命名经过了哈希处理. 看下url-loader是什么样

菜鸟webpack教程纠错

gei事例: http://www.runoob.com/w3cnote/webpack-tutorial.html 本次的问题主要是在loader部分,原因是按照教程的操作,会出现一下错误 后来发现问题出在这里: 只要改成这样就好了: