(二)webpack入门——webpack的使用

时间 2019-11-20

标签 webpack 入门使用繁體版

原文原文链接

上一篇文章（一）webpack入门——webpack的安装中，咱们知道了webpack的安装，接下来咱们要学习如何使用webpack。javascript

如下内容来自webpack文档（不是直译）: http://webpack.github.io/docs/usage.htmlhtml

简单的webpack使用

建立一个模块化的Javascript项目

建立一个文件件，在文件夹里面建立两个js文件，分别命名为cats.js、app.js，并使用CommonJs语法来建立文件内容。

cats.js文件内容：

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

app.js(entry point)内容：

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

'entry point'即应用程序开始的地方，也是webpack开始跟踪模块之间依赖的地方。

开始打包

给webpack一我的口文件（app.js）,设置一个特殊的输出文件（app.bundle.js）:

webpack app.js app.bundle.js

app.bundle.js部份内容：

因而可知，不只app.js里面的内容被打包进app.bundle.js，app.js所依赖度cats.js也被打包了进来。webpack打包原理是边读边分析入口文件的依赖，分析入口文件依赖的文件的依赖，以此类推，只要有依赖都去分析并打包到输出文件(app.bundle.js)中,下图很直观的展现了webpack打包原理：

打包文件已打包好，如今能够用运行 node app.bundle.js 命令看看输出内容(cats模块被输出出来了)：

复杂的webpack使用

经过以上内容，咱们大概知道了webpack是怎么打包运行的，如今咱们来看看复杂一点的案例。

webpack 是一个很是灵活的模块打包工具。它提供了不少高级特性，可是不是全部的特性都是经过命令行来使用的。想要使用更多的webpack特性，须要建立配置文件。

项目结构

在真实的webpack项目中，咱们会将资源文件和打包文件分开组织在不一样的文件夹中。在接下来的例子中咱们将资源文件放在 src 文件夹中，打包文件放在 dist 中。

咱们最终的项目目录结构是这样的：

开始建立项目，建立文件夹及文件。

1.建立项目文件命名为demo

2.在demo文件夹中建立src和dist文件夹

3.在src文件夹中建立app.js、cats.js，内容和对应的上面的app.js、cats.js内容同样。

4.用如下命令初始化项目，建立package.json配置文件。

npm init

5.安装webpack插件，而且讲webpack插件配置到package.json文件中

npm install webpack --save-devjava

建立及配置webpack配置文件

1.建立webpack.config.js文件，内容为：

 module.exports = {
     entry: './src/app.js',
     output: {
         path: './dist',
         filename: 'app.bundle.js'
     }
 };

2.有了配置文件后，就能够简单的用webpack命令进行打包了 .

webpack

dist文件夹下就多了一个app.bundle.js文件.

3. 运行node dist/app.bundle.js命令，又能够获得cats的数组列表。

node dist/app.bundle.js

['dave', 'henry', 'martha']

使用loaders

webpack只支持本地JavaScript模块，可是不少人使用ES201五、CoffeeScript、TypeScript等的转译器。webpack的‘loaders’便可解决转译的问题。Loaders是特殊的模块，webpack用来加载其余的用别的语言写的模块到webpack能够识别的JavaScript中。例如，babel-loader使用Babel来加载ES2015文件。node

'json-loader'加载JSON文件jquery

Loaders能够是被连接的，的确有些时候你须要讲loaders连接在一块儿。例如。‘yaml-loader’只能将YAML转换成JSON.所以，你须要将它连接到‘json-loader’因此才可使用。

用babel-loader转译ES2015

在这个例子中，咱们将会告诉webpack经过Babel运行咱们的资源文件因此咱们可使用ES2015的特性

1.安装Babel和presets:

npm install babel-core babel-preset-es2015

2.安装babel-loader:

npm install babel-loader --save-dev

3.添加一个以.babelrc命名的文件，并使用presets配置Babel

{ "presets": [ "es2015" ] }

4.修改 webpack.config.js使得'babel-loader'来处理全部.js结尾的文件

 module.exports = {
     entry: './src/app.js',
     output: {
         path: './dist',
         filename: 'app.bundle.js',
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
         }]
     }
 }

其中exclude: /node_modules/配置是将node_modules文件下的内容排除在外，下降编译时间。

5.安装你想使用的libraries例如jquery

 npm install jquery babel-polyfill --save

如今咱们使用--save代替以前使用的--save-dev，这些libraries将在运行时候使用。咱们使用了babel-polyfill,所以在老的浏览器中ES2015 API是可用的。

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);
 }

7.用webpack打包模块

  webpack

8. 加载index.html文件这个app才能运行起来webpack

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
</head>
<body>
    <scriptsrc="dist/app.bundle.js"charset="utf-8"></script>
</body>
</html>

当你打开index.html时，你能够看到cats的内容列表git

使用插件

在你的工做流程中，一般你想作一些额外的包的处理。例如压缩文件便于客户端更快速的加载。插件能够解决这个问题。咱们将会增长uglify插件到配置文件中：github

const webpack = require('webpack');

module.exports = {
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

uglify插件包含在webpack里，因此不须要额外的引用模块，可是不是全部的都是这样，webpack不包含的插件，第三方插件或者本身写的插件是要包含额外的引用模块的。web