博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一步步了解webpack
阅读量:5929 次
发布时间:2019-06-19

本文共 2662 字,大约阅读时间需要 8 分钟。

Markdown Plus

前言

demo 地址:

之前学习了 broswerify,发现确实很好用。虽然没有 grunt 那样丰富的配置和插件,但就是觉得“恩!这就是我想要的结构”。

webpack 感觉就是 broswerify 的进阶版,怎么说呢:

  • 有更多可配置内容

  • 比起 broswerify 一股脑得打成单包更智能。

安装

npm install webpack -g

-g 方便我们在命令行直接使用 webpack

使用

基本命令 demo1

首先建立两个文件

//entry.jsdocument.write("It works.");//index.html            

执行 webpack

$ webpack ./entry.js bundle.js

生成 bundle.js,然后打开 index.html 就可以看到

<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works.</div>

添加依赖 demo2

增加一个文件

//content.jsmodule.exports = "It works from content.js.";

我们修改 entry.js 加载 content.js 的内容

//document.write("It works.");document.write(require("./content.js"));

同样执行

$ webpack ./entry.js bundle.js

在浏览器中看到

<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>

done~

webpack 分析你的入口文件(entry.js)所依赖的其他文件(模块),这些文件都会被打包到 bundle.js中。webpack 会分配给每个模块一个唯一的 Id,在 bundle.js 中通过这个 Id 来访问每个模块。在程序启动的时候只会处理入口模块(entry.js), require 方法会在执行时即时地处理依赖模块。

打包 css demo3

webpack 只能处理 javascript,要处理 css 就需要安装css-load来转换 css 为 js,还要安装style-loader 将转换后的 css 加载到 dom 中。

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

接着增加 css 文件

body {    background: yellow;}

修改 entry.js,然后就能看到效果

require("!style!css!./style.css");document.write(require("./content.js"));

同样执行

$ webpack ./entry.js bundle.js

<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>

通过 “!style!css!” 这样的前缀,可以把文件进行一系列的转化,最终变成 javascript 的一个模块。

命令行绑定 loaders

如果我们不想写过长的 require : require("!style!css!./style.css");,简化为require("./style.css")

或者我们喜欢灵活定制 css 文件的转化方式。

修改 entry.js

//require("!style!css!./style.css");require("./style.css");document.write(require("./content.js"));

执行下面的命令:

$ webpack ./entry.js bundle.js --module-bind "css=style\!css"

官网说明在这有个错误,css=style\!css 里面少了个反斜杠,原因是叹号在 bash 里有特殊意义

<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>

添加 webpack.config.js demo4

理解了上面的 demo 以后,接下来我们就可以在项目根目录下新建一个webpack.config.js ,然后通过一句命令$ webpack就能打包我们的项目。

//webpack.config.jsmodule.exports = {    entry: "./entry.js",    output: {        path: __dirname,        filename: "bundle.js"    },    module: {        loaders: [            { test: /\.css$/, loader: "style!css" }        ]    }};

webpack 命令会尝试读取同目录中的 webpack.config.js 文件。

And More

还可以通过一些参数使得打包过程可视化

$ webpack --progress --colors

--progress 打印打包日志

--colors -c 带颜色的日志(官方是这么描述的,但我没看到颜色...)

当然还有 watch 功能

$ webpack --progress --colors --watch

必须的要有 server

$ npm install webpack-dev-server -g$ webpack-dev-server --progress --colors

~ 完 ~

这里只是介绍了 webpack 基本的用法

demo 基本都是翻译自
更多详细和进阶的内容还是推荐去看看

参考

转载地址:http://bqevx.baihongyu.com/

你可能感兴趣的文章
正则表达式太慢?这里有一个提速100倍的方案(附代码)
查看>>
Linux 线程分离状态
查看>>
[20160112]存储还是应用问题.txt
查看>>
[20160711索引键值在B tree索引块中的顺序2
查看>>
如何提升网站安全?网站托管公司教你!
查看>>
6天通吃树结构—— 第一天 二叉查找树
查看>>
HTTP状态管理机制之Cookie(转)
查看>>
Git学习-->GitLab如何修改时区?
查看>>
谁拉大了中国制造的贫富差距?
查看>>
innodb_buffer_pool_size大小设置
查看>>
mybatis 使用经验小结 good
查看>>
【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨...
查看>>
十天学Linux内核之第六天---调度和内核同步
查看>>
Java---文件的切割与合并,已经实现图形界面(工具)
查看>>
微信小程序把玩(三十五)Video API
查看>>
开源的rtsp实现
查看>>
戴尔SC系列入门级中端存储引入全方位的企业级功能
查看>>
JavaScript浮点数陷阱及解法
查看>>
tomcat监控重启脚本
查看>>
德国黑客攻破苹果Touch ID指纹识别系统
查看>>