webpack入门（二）

喜欢ヅ旅行 2022-06-17 05:27 164阅读 0赞

# 安装 #

可以用 npm 安装

npm install webpack -g
     
      
       1

> 注意： 这里全局安装是出于演示的目的。在真实的项目中，建议安装为你的项目依赖。

# 开始 #

首先，我们将只使用webpack的命令行界面学习基本webpack 。

## 新建一个 模块化的javascript 项目 ##

**cats.js**

var cats = ['dave', 'henry', 'martha'];
    module.exports = cats;
     
      
       1
       2

**app.js (入口文件)**

cats = require('./cats.js');
    console.log(cats);
     
      
       1
       2

入口文件就是你项目启动点。也是webpack追踪模块之间依赖关系的入口点。

## 5秒 打包 ##

给webpack指定一个入口文件（app.js）和输出文件（app.bundle.js）

webpack ./app.js app.bundle.js
     
      
       1

webpack将读取和分析入口点及其依赖(包括传递的依赖）。然后它会把它们都打包到app.bundle.js。   
现在你打好的包可以跑起来了。 运行一下 `node app.bundle.js` ，你会发现，哇，你有好多猫。

node app.bundle.js
    ["dave", "henry", "martha"]
     
      
       1
       2

你也可以在 浏览器端使用打好的包。

## 来点严肃的 ##

webpack是一个非常灵活的模块打包器。它提供了很多高级功能，但并非所有功能都通过命令行界面实现。要获得全部webpack的灵活性，我们需要创建一个 config 文件

### 项目结构 ###

在真实的webpack项目中，我们会把源文件和打包文件用文件夹分开。在这个例子中，我们把源文件放在src中，把打包后的文件放在bin中。   
结构如下

project
    └─webpack.config.js
    └─src
      └─app.js
      └─app.js
    └─node_modules
    └─bin
      └─app.bundle.js
     
      
       1
       2
       3
       4
       5
       6
       7
       8

> 大千世界，无奇不有。有不少不一样的结构。有些项目用app而不是src，用些用dist 或者 build而不是bin.项目测试学用 test,tests,spec,specs或者把测试文件放在源文件夹一起。

1.创建 bin 和 src 文件夹。

mkdir bin
     mkdir src
     
      
       1
       2

2.原始源文件移动到src文件夹

mv app.js cats.js src
     
      
       1

3.初始化一个新项目。

npm init # (answer the questions)
     
      
       1

4.安装webpack为你的项目开发依赖。这将声明你的项目适用webpack版本。

npm install --save-dev webpack
     
      
       1

### 迁移到config文件 ###

随着你项目越来越大，你的配置文件也会越来越复杂。从命令行配置webpack就显得很不科学。我们来创建一个配置文件。   
1.创建 webpack.config.js

module.exports = {
         entry: './src/app.js',
         output: {
             path: './bin',
             filename: 'app.bundle.js'
         }
     };
     
      
       1
       2
       3
       4
       5
       6
       7

> webpack 配置文件是 node 风格的模式。所以您可以运行任何类型的代码，只要一个配置对象，导出了配置模块。

2.在放了配置文件的地方，你可以简单地运行一下 webpack:

webpack
     
      
       1

3.运行 bin/app.bundle.js ,你又可以拿到你的猫了

node bin/app.bundle.js
     ["dave", "henry", "martha"]
     
      
       1
       2

> 你也可以 `require` 用npm安装过的模块，而不需要额外的配置。

### 使用loader ###

webpack原生只支持javascript模式。但是许多人会用像es 2015 ，coffeeScript ，typeScript 等语言。这些语言是可以用的，要用“loader”处理它们。   
loader是一种用来加载其它语言到javascript（webapck能够理解）的特殊的模块 。例如，`babel-loader` 用Babel 加载 ES2015文件。`json-loader` 加载JSON文件（简单地在前面加上 `module.exports=` 来把它转换成 CommonJS模式）   
。loader可以链式调用，而且你通常需要这么做。例如，`yaml-loader` 只把 YAML转换为 JSON,因此你需要 把它链到 `json-loader` 这样就可以用啦。

### 用 `babel-loader` 转换 ES2015 ###

在这个例子中， 我们会告诉 webpack　用　babel 跑我们的源码，这样就可以用 ES2015新特性了。   
1.先安装 babel 和 预设。

npm intall  --save-dev babel-core babel-preset-es2015
     
      
       1

2.安装 babel-loader

npm install --save-dev babel-loader
     
      
       1

3.添加 `.babelrc` 文件来配置 babel 使用 规范。

npm install --save-dev babel-loader
     
      
       1

4.修改 `webpack.config.js` 用babel-loader 处理所以 .js文件。

module.exports = {
         entry: './src/app.js',
         output: {
             path: './bin',
             filename: 'app.bundle.js',
         },
         module: {
             loaders: [{
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
             }]
         }
     }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14

> 我们排除 node\_modules中的文件，因为要不然的话所有外部库都会通过babel编译，将会降低 编译速度。

5.安装你想用的第三方库。（例如 jQuery）

npm install --save jquery babel-polyfill
     
      
       1

> 这里用 –save 而不是 –save-dev，　是因为这些库在执行时会用到。我们也安装了babel-polyfill 这样在一些老式浏览中可以用 ES2015了。

6.编辑 src/app.js

import 'babel-polyfill';
     import cats from './cats';
     import $ from 'jquery';
    
     $('<h1>Cats</h1>').appendTo('body');
     const ul = $('<ul></ul>').appendTo('body');
     for (const cat of cats) {
         $('<li></li>').text(cat).appendTo(ul);
     }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9

7.用webpack 打包

webpack
     
      
       1

8.添加 index.html，这样app能跑起来。

<!DOCTYPE html><body>
     <script src="bin/app.bundle.js"></script>
     
      
       1
       2

当你打开 index.html 时你应该能看到你的猫了。

有许多不同的loders你可以用在app打包中，包括 css 和 image　loader。

### 用插件 ###

通常你需要在你的打包工作流中做一些额外的事情。一个简单的例子是你会压缩文件来使客户端加载起来更快，这就可以用插件来做。我们将添加 uglify 插件到配置中。

const webpack = require('webpack');
    
    module.exports = {
        entry: './src/app.js',
        output: {
            path: './bin',
            filename: 'app.bundle.js',
        },
        module: {
            loaders: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
            }]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                },
                output: {
                    comments: false,
                },
            }),
        ]
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26

uglify 插件在webpack包中已经包含了，所以你不需要另外添加，但也有可能出现例外。你可以编写自己的自定义插件。在这个例子中， uglify 插件就把文件从1618b压缩到了308b。