为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 前端构建工具 Webpack

前端构建工具 Webpack

2019.04.27 09:57 1054浏览

现在 Web 前端发展得非常快,项目也越来越庞大,项目所依赖的模块也越来越多,我们需要一个帮助我们管理依赖并将依赖一起打包的工具。市面上的确已经有了非常优秀的像 Grunt 和 Gulp 这样的自动化构件工具,但是我们又为什么要重复制造轮子呢:

包管理工具 npm bower yarn

为什么重复造轮子

以下是 Webpack 指南的原话:

这些已有的模块化工具并不能很好的完成如下的目标:

  • 将依赖树拆分成按需加载的块

  • 初始化加载的耗时尽量少

  • 各种静态资源都可以视作模块

  • 将第三方库整合成模块的能力

  • 可以自定义打包逻辑的能力

  • 适合大项目,无论是单页还是多页的 Web 应用

安装

当然首先要安装 Node.js

全局安装 Webpack

$ npm install webpack -g

可以通过如下命令尝试是否安装 OK:

$ webpack -h

项目中安装 Webpack

进入到项目目录,初始化项目后:

$ npm install webpack --save-dev

使用

创建入口页面和入口程序:

<!-- src/index.html --><!DOCTYPE html><html><head>
    <meta charset="utf8">
    <title>Webpack</title></head><body>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.app.js"></script></body></html>
<!-- src/app.js -->document.write('It works.');

编译打包

运行如下命令,打开 index.html 会看到 It works.

$ webpack src/app.js dist/bundle.app.js

多个模块打包

添加一个新模块,并在 app.js 中引用此模块:

<!-- src/module.js -->module.exports = 'It works from module.js';
<!-- src/app.js -->var module = require('./module.js');

document.write('It works.');
document.write(module);

再次运行打包命令,打开 index.html 会看到 It works.It works.It works from module.js

Webpack 会分析入口文件,解析包含依赖的各个文件,这些模块都会打包到 bundle.app.js 中去。

Loader

Loader 是模块和资源的转换器,Webpack 只会处理 JavaScript 模块,如果要处理其它类型的文件就需要靠 Loader 来做转换。我们接着上面的例子:

安装

$ npm install css-loader style-loader --save-dev

创建 CSS 文件

/* src/style.css */body { color: red; }

在程序中引入

<!-- src/app.js -->var module = require('./module.js');require("./style.css") // 引入 style.cssdocument.write('It works.');document.write(module);

编译打包

运行如下命令,打开 index.html 会看到红色的 It works.It works.It works from module.js

$ webpack src/app.js dist/bundle.app.js --module-bind 'css=style!css'

配置文件

当然我在打包的过程中会有各种不同的情况需要处理,如果通过这种命令行来处理显得有写困难,并且难以理解。为了方便我们可有通过配置来完成这个事情。在项目的根目录创建配置 webpack.config.js

var webpack = require('webpack');module.exports = {    entry: './src/app.js',    output: {        path: './dist',        filename: 'bundle.app.js'
    },    module: {        loaders: [
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
}

这样一来,就可以直接通过命令 webpack 来打包了。

插件

Webpack 插件可以完成更多的 Loader 无法完成的功能,例如:html-webpack-plugin 可以自动的创建 html 模版,并且将依赖的最终产物自动的添加的 html 内部,我们尝试一下:

安装插件

$ npm install html-webpack-plugin --save-dev

在配置中使用

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/app.js',    output: {        path:'./dist',        filename: 'bundle.app.js'
    },    module: {        loaders: [
            {test: /\.css$/, loader: 'style!css'}
        ]
    },    plugins: [        new HtmlWebpackPlugin({            template: './src/index.html'
        })
    ],
}

修改 src/index.html 去除中间的 js 的引用:

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Webpack</title></head><body>
    </body></html>

这样在此运行 webpack 命令,打包结束后会发现 dist 文件夹中自动的创建了一个 index.html 并且把一来的 bundle.app.js 自动添加了进去。

webpack-dev-server

借助 webpack-dev-server 会让我们的开发环境更加的简单,它可以创建一个 web 服务,并且可以监听程序的变化并自动刷新页面。

安装

$ npm install webpack-dev-server --save-dev

配置

// ...module.exports = {    // ...
    devServer: {        inline: true,
        progress: true,
        port: 8080,
        historyApiFallback: true
    }    // ...}

运行

运行如下命令后,在浏览器中打开:http://localhost:8080/ 就可以看到你的页面了:

$ $(npm bin)/webpack-dev-server

代码拆分(Code Splitting)

chunk





点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
133

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消