最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

前端工程化——Webpack入门使用

XAMPP案例 admin 730浏览 0评论

前言
webpack 是什么?来自一位小白的疑问。

是构建工具,还是打包工具?

webpack是一个模块加载器兼打包工具,它能够让你非常清晰的把编写模块化的代码,什么编译都交给webpack就好了,当它也能实现简单的打包,比如合并js,压缩等。

下面我们简单说下webpack和gulp的区别,好加深下webpack的理解。

本质上来说,gulp是通过一系列的插件实现了原本复杂繁琐的任务自动化,比如拷贝啊,替换文件啥的,是一个纯粹的工具。它并不能将你的css,图片等非js资源模块化。但是webpack可以做到将非js资源模块化,比如图片等。

总的来说,gulp是一个自动化任务的工具,所以在项目的开发中,你也可以采用 gulp + webpack 组合大招更好的提升项目效率。

Webpack的入门使用
说那么多概念还不如写个小demo来的实在,相比各位看官也是这么想得。

其实,我们记住webpack的核心功能是将静态资源模块化,js,css,图片啊等等,都能通过require的方式进行加载。当然你也可以利用ES6语法improt来引入,这个后面说。

下面我们开始进行咱们的项目吧。

1.首先创建一个空目录,执行命令进行初始化

> npm init
这样,咱们就有package.json了,下面我们先把文件目录搭建一下哈。

目录结构如下:

图片描述

好。文件我们建完了,该干活写代码了。

第一个是 index.html 首页,这里我们的很简单外部只是引入了一个 bundle.js,相信大家现在也找不到这个bundle.js,因为这个文件是后面webpack编译打包生成的。他会将style.css,index.js打包成一个js,这样能加快浏览器的加载效率。

//index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>demo1</title>
</head>
<body>
<div>Hello,world</div>
<img src=”./demo.png” alt=””>
<script src=”../dist/bundle.js”></script>
</body>
</html>
再看看 style.css,很简单,就一句话。

// style.css

body{
background:red;
}
再下一下步,我们看看 index.js,它也很简单,而且它的目的是webpack的入口文件,webpack打包就是通过入口文件将里面require的资源一个个加载编译打包。你可以把index.js看成一个向导,指引着webpack去寻找那些需要被解救编译打包的文件。

//index.js

require(‘./style.css’);
The Next,我们看看编写 webpack.config.js ,特别声明,这个文件是webpack的默认配置,一般你没啥需求也别改它的名字了,但是你要修改的话,自己百度去吧。

修改webpack配置文件命令如下:

> webpack –config XXX.js
具体webpack.config.js配置如下:

// webpack.config.js

var path = require(‘path’)
var webpack = require(‘webpack’);

module.exports = {
entry: [‘./src/index’], // 指定编译打包入口文件
output: { // 编译完了,输出到这个目录,这个文件名
path: path.join(__dirname, ‘dist’),
filename: ‘bundle.js’
},
plugins: [ // 这个是插件配置噢
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
})
],
module: { // 这个是引入的模块,可以用来做一些其他的事儿
loaders: [{ //比如这个loaders模块,可以给每种类型文件指定加载器
test: /\.css$/,
loaders: [‘style’, ‘css’]
},
]
}
}
好了,到现在我们的业务代码都写完了,该安装所需的插件了。

这里一下安装了多个插件,可能会比较慢,可以先换成国内的淘宝npm镜像:

> npm –registry https://registry.npm.taobao.org info underscore
安装插件命令如下:

> npm install style-loader css-loader webpack –save
–save 是将依赖写入到package.json里,后面代码给其他人用,直接npm install就能自动安装所有的依赖了。

安装完成后,咱们开始打包!!!

在项目目录执行以下命令:别傻乎乎的把 > 也拷贝进去啊,就是只有一个 webpack!!!

> webpack
执行完上面的webpack命令,会出现以下令人欣喜的画面,啥?没出现?自己上去找找看看哪里步骤漏了。
这里顺便推荐一个好用的windows下面的命令行工具: cmder

图片描述

然后你再打开你项目目录的 index.html ,直接双击用浏览器打开噢。

就能看的如下画面。相信你的require(‘./style.css’)也就生效了。

clipboard.png

写在最后
一个入门级的使用就到这儿了,webpack还有很多黑魔法,本文也只是一个入门使用,后续的我用完再继续跟大家分享一下,对了,还请大神看到有误的地方多多指点哈,提点提点小弟。

转载请注明:XAMPP中文组官网 » 前端工程化——Webpack入门使用

您必须 登录 才能发表评论!