CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

webpack使用

发布时间:『 2016-10-04 14:58』  博客类别:WEB前端  阅读(1573) 评论(0)

再上一张中,我们对Webpack有了初步的认识。本章我们将进行学习Webpack的简单使用。

Webpack安装

可以用 npm 安装

npm install webpack -g

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

开始

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

新建一个 模块化的javascript 项目

cats.js

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

app.js (入口文件)

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

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

5秒 打包

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

webpack ./app.js app.bundle.js

webpack将读取和分析入口点及其依赖(包括传递的依赖)。然后它会把它们都打包到app.bundle.js。 

现在你打好的包可以跑起来了。 运行一下 node app.bundle.js ,你会发现,哇,你有好多猫。

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

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

来点严肃的

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

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

项目结构如下

project
└─webpack.config.js
└─src
  └─app.js
  └─app.js
└─node_modules
└─bin
  └─app.bundle.js

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

创建 bin 和 src 文件夹。

mkdir bin
mkdir src

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

mv app.js cats.js src

初始化一个新项目。

npm init # (answer the questions)

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

npm install --save-dev webpack

随着你项目越来越大,你的配置文件也会越来越复杂。从命令行配置webpack就显得很不科学。我们来创建一个配置文件,把一些配置信息迁移到config文件。

创建 webpack.config.js

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

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

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

webpack

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

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

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

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新特性了。

先安装 babel 和 预设

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

安装 babel-loader

npm install --save-dev babel-loader

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

npm install --save-dev babel-loader

修改 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',
         }]
     }
 }

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

安装你想用的第三方库。(例如 jQuery)

npm install --save jquery babel-polyfill

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

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

用webpack 打包

webpack

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

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

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

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

webpack插件的使用

通常你需要在你的打包工作流中做一些额外的事情。一个简单的例子是你会压缩文件来使客户端加载起来更快,这就可以用插件来做。我们将添加 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,
            },
        }),
    ]
}

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


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   webpack     webpack教程     webpack插件     webpack打包  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有