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

2024-10-10 20:01:09

一. 常见打包工具的介绍

在打包工具中,常见的有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命令进行代码的转换
更多详细说明请参见(//www.jb51.net/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-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是不起作用,会报错误的,错误如下图所示:

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

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实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.

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

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

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

详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.
基于打包工具Webpack进行项目开发实例

一. 常见打包工具的介绍在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一个为前端模块打包构建而生的工具. 二. 工具的使用 (1)作为npm包的RequireJS提供了一个可执行的r.js工具,通过命令行执行,使用方式如下: npm instal
webpack vue项目开发环境局域网访问方法

思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可
深入理解基于vue-cli的webpack打包优化实践及探索

转眼已经是2019年,短短三四年时间,webpack打包工具成为了前端开发中必备工具,曾经一度的面试题都是问,请问前端页面优化的方式有哪些?大家也是能够信手拈来的说出缓存.压缩文件.CSS雪碧图以及部署CDN等等各种方法,但是今天不一样了,可能你去面试问的就是,请问你是否知道webpack的打包原理,webpack的打包优化方法有哪些?所以该说不说的,笔者闲着没事研究了一下webpack的打包优化,可能大家都有看过类似的优化文章~ 但是笔者还是希望能够给大家一些新的启发~ 1.准备工作:测速与分
全新打包工具parcel零配置vue开发脚手架

parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型,
详解webpack模块加载器兼打包工具

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大.对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli 安装vue命令行工具 2,vue init webpack vue-demo 使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目一.父组件向子组件传递数据然后删除默认的Hello.vue组件,把App.vue整理成以下样子:
vue-cli webpack模板项目搭建及打包时路径问题的解决方法

这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装
基于vue-cli 打包时抽离项目相关配置文件详解

前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需要对这些配置文件进行抽离,不让webpack把配置文件也进行编译. 首先,我们需要在/static 下面新建一个js文件作为配置文件里面的内容如下: window.g={ AXIOS_TIMEOUT:10000, SERVICE_CONTEXT_PATH:`http://10.200.199.84

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

相关推荐

随机推荐