首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于打包工具Webpack进行项目开发实例

Posted in Javascript onMay 29, 2018

一. 常见打包工具的介绍

在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一个为前端模块打包构建而生的工具.

二. 工具的使用

(1)作为npm包的RequireJS提供了一个可执行的r.js工具,通过命令行执行,使用方式如下:

npm install -g requirejs
r.js -o app.build.js

(2)browserify提供的命令行工具,使用如下面所示:

npm install -g browserify
browserify main.js -o bundle.js

(3)webpack的使用

如下面所示,使用命令进行安装与使用,如下所示:

npm install webpack -g
webpack main.js -o bundle.js

在上面命令行中,我们进行了简单的全局安装webpack和对main.js文件的打包操作

三. 项目构建

对前端项目来说,webpack扮演的是构建工具的角色,并不是代码依赖,应该被安装在dev-dependencies中,使用如下命令进行安装:

npm install webpack --save-dev

在这个示例中,将进行简单应用的构建,包括两个js模块

1.生成文本”Hello world”的hello模块(hello.js)

module.exports = 'Hello world';

2.打印文本的index.js模块(index.js)

var text = require('./hello');
console.log(text);

和用于在前端浏览器中显示内容的index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

在上面的src路径引入的bundle.js文件是不存在的,因为还没有创建,在使用webpack进行创建打包之后的js文件,如下面所示命令进行创建:

webpack ./index.js bundle.js

在执行完上面命令之后,我们就可以在浏览控制台中看到打印出的结果 Hello world

这样,我们就实现了简单项目的实现原理,打包内容为bundle.js,我们能够看到打包之后的内容,在这里就不贴代码了.

当然,如果我们写代码都是这样去构建,那么,作用意义也不大,这就不得不提及webpack的另外一个优点了,那就是配置文件的使用,在使用配置文件之前,我们在进行安装样式加载器,如下面命令:

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

通过上面的配置,我们就能够进行样式的加载

然后我们进行webpack配置文件设置,需要首先在项目下创建文件webpack.config.js文件,其中内容如下所示:

var path = require('path');
module.exports = {
 entry: path.join(__dirname, 'index'),
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module:{
  loaders: [
   {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }
  ]
 }
};

在上面代码中,
* entry: 表示项目的入口文件
* output: 表示构建打包之后的结果输出,在输出的对象中仍有多项配置比如上面所使用的输出路径和输出文件名
* module.loaders是对于模块中的loader使用的配置,值为一个数组,数组的每一项指定一个规则,规则的test字段是正则表达式,若被依赖模块的ID符合该正则表达式,则对依赖进行使用loader转换.这样,我们就能够使用webpack命令进行代码的转换
更多详细说明请参见(https://3water.com/article/136710.htm)

如下面命令行命令就可以进行代码的打包工作webpack

通过执行上面命令,同样能够实现文件的打包,并且,在显示文件时也能够将样式进行显示,为了证明样式确实能够被引入,我们进行创建index.css文件,其中内容如下所示:

body {
  background-color: darkgray;
}

然后在我们之前创建的index.js中引入,修改之后的代码如下所示:

// import style from './index.css';
var style = require('./index.css');
var text = require('./hello');
console.log(text);

在上面代码中,注释掉的是node模块的导入形式,而使用中的是CommonJS的使用规范,使用同样的命令打包之后,我们能够在浏览器中看到如下效果:

基于打包工具Webpack进行项目开发实例 

也就是样式进行了展现.

当然,webpack也能够通过webpack-dev-server进行项目的实时构建.
使用如下命令进行webpack-dev-server的安装:

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

在安装之后,我们能够配置使用服务器,首先,我们的package.json文件将会更为下面这样,新增内容为:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --inline"
 },

在添加完这行命令之后,我们就可以使用下面命令进行启动webpack-dev-server服务器了,

npm run start

之后完整的package.json为如下:

{
 "name": "react-basics-review",
 "version": "1.0.0",
 "description": "a practise of react study ",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --inline"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/suwu150/react-basics-review.git"
 },
 "author": "jkwu",
 "license": "ISC",
 "bugs": {
  "url": "https://github.com/suwu150/react-basics-review/issues"
 },
 "homepage": "https://github.com/suwu150/react-basics-review#readme",
 "devDependencies": {
  "babel-plugin-transform-object-rest-spread": "^6.23.0",
  "babel-preset-es2015": "^6.24.1",
  "css-loader": "^0.28.5",
  "lodash": "^4.17.4",
  "mocha": "^3.5.0",
  "react": "^15.6.1",
  "style-loader": "^0.18.2",
  "webpack": "^3.5.5",
  "webpack-dev-server": "^2.7.1"
 },
 "dependencies": {
  "lodash": "^4.17.4"
 }
}

webpack配置文件修改为如下内容:

devServer中常用的配置对象属性如下：

* 1. contentBase：”./” // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；
* 2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面；
* 3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效，这一点我们之后再说；
* 4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，不少博客都将hot设置了true，这里其实如果单单设置为true是不起作用,会报错误的,错误如下图所示:

基于打包工具Webpack进行项目开发实例 

这是因为在使用的过程中没有使用插件的原因,只需要将下面命令添加到配置文件即可:

plugins:[
  new webpack.HotModuleReplacementPlugin(),
 ],

也就是调用webpack的热模块插件处理.

*5 .port：端口号(默认8080) ；
*6.其他配置信息
?quiet 控制台中不输出打包的信息
?compress 开启gzip压缩
?progress 显示打包的进度
?open 自动打开浏览器

var path = require('path');
const webpack = require ("webpack");
module.exports = {
 entry: path.join(__dirname, 'index'),
 output: {
  path: __dirname,
  filename: 'bundle.js',
  publicPath: "/assets/",
 },
 module:{
  loaders: [
   {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }
  ]
 },
 plugins:[
  new webpack.HotModuleReplacementPlugin(),
 ],
 devServer:{
  //我们在这里对webpack-dev-server进行配置
  contentBase: "./",
  historyApiFallback:true,
  inline:true,
  hot:true
 }
};

index.html文件的内容修改为下面面格式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>身在山中不知山高</div>
<script src="assets/bundle.js"></script>
</body>
</html>

也就是将路径进行修改,因为在webpack.config.json文件中进行了服务器路径的配置,修改了 publicPath: "/assets/",项,在命令行执行npm run start能看到服务器正常启动,然后我们去浏览器进行访问,如下所示结果:

基于打包工具Webpack进行项目开发实例 

至此,我们完成了webpack实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.

如下面链接提示:,进行实时构建的搭建webpack-dev-server实时搭建

同时该项目使用的代码在github地址如下:github地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于打包工具Webpack进行项目开发实例

- Author -

suwu150

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript设计模式之策略模式实例
Oct 10 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
Oct 11 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
React中的refs的使用教程
Feb 13 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 #Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 #Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 #Javascript
Vue 全局loading组件实例详解
May 29 #Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 #Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
矿石收音机(1) VOLVO(1) E1-XM(1) ETON(1) 军机(1) 摩托罗拉(1) R601SW(1) 沃尔沃(1) S900(1) 66-XI(1)
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
Bootstrap入门书籍之（三）栅格系统
2016/02/17 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
flask框架视图函数用法示例
2018/07/19 Python
Python WEB应用部署的实现方法
2019/01/02 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
介绍一下grep命令的使用
2012/06/28 面试题
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
马智宇结婚主持词
2014/04/01 职场文书
公司庆典主持词
2015/07/04 职场文书
关于五一放假的通知
2015/08/18 职场文书
互联网创业商业模式以及赚钱法则有哪些？
2019/10/12 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android