前端构建工具webpack（如何使用webpack模块化管理与打包工具）

本文目录

• 如何使用webpack模块化管理与打包工具
• 在webpack中如何实现多页面开发

如何使用webpack模块化管理与打包工具

这次给大家带来如何使用webpack模块化管理与打包工具，使用webpack模块化管理与打包工具的注意事项有哪些，下面就是实战案例，一起来看一下。
Webpack简介
webpack是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际
需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
模块系统的演进《script》标签
《script src="module1.js"》《/script》
《script src="module2.js"》《/script》
《script src="libraryA.js"》《/script》
《script src="module3.js"》《/script》这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，
不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库。
这种原始的加载方式暴露了一些显而易见的弊端：
全局作用域下容易造成变量冲突
文件只能按照 《script》 的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
CommonJS规范
CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量 或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。
一个直观的例子
// moduleA.js
module.exports = function( value ){
return value * 2;
}
// moduleB.js
var multiplyBy2 = require(’./moduleA’);
var result = multiplyBy2(4);AMD规范
AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。
模块通过 define 函数定义在闭包中，格式如下：
define(id?: String, dependencies?: String, factory: Function|Object);id 是模块的名字，它是可选的参数。
factory 是最后一个参数，它包裹了模块的具体实现，它是一个函数或者对象。如果是函数，那么它的返回值就是模块的输出接口或值。
一些用例
定义一个名为 myModule 的模块，它依赖 jQuery 模块：
define(’myModule’, , function($) {
// $ 是 jquery 模块的输出
$(’body’).text(’hello world’);
}); // 使用 require(, function(myModule) {});注意 ：在 webpack 中，模块名只有局部作用域，在 Require.js 中模块名是全局作用域，可以在全局引用。
定义一个没有 id 值的匿名模块，通常作为应用的启动函数：
define(, function($) {
$(’body’).text(’hello world’);
});AMD 也采用require()语句加载模块，但不同于CommonJS,他要求两个参数
第一个参数，是一个数组，里面的成员就是要加载的模块； 第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境
目前，主要有两个Javascript库实现了AMD规范： require.js 和 curl.js
require(, function (math) {
math.add(2, 3);
});什么是 Webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 的特点
代码拆分
Loader
智能解析
插件系统
快速运行
webpack基本使用
创建项目根目录
初始化
npm init 或 npm init -y全局安装
npm install webpack -g局部安装,在项目目录下安装
npm install webpack --save-dev--save: 将安装的包的信息保存在package中
--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件
如果使用web开发工具,单独安装
npm install webpack-dev-server --save-dev基本使用
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
《!-- index.html --》
《html》
《head》
《meta charset="utf-8"》
《/head》
《body》
《script src="bundle.js"》《/script》
《/body》
《/html》创建entry.js
// entry.js : 在页面中打印出一句话
document.write(’It works.’)然后编译 entry.js并打包到 bundle.js文件中
// 使用npm命令
webpack entry.js bundle.js使用模块
1.创建模块module.js,在内部导出内容
module.exports = ’It works from module.js’2.在entry.js中使用自定义的模块
//entry.js
document.write(’It works.’)
document.write(require(’./module.js’)) // 添加模块加载css模块
1.安装css-loader
npm install css-loader style-loader --save-dev2.创建css文件
//style.css
body { background: yellow; }3.修改 entry.js：
require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write(’It works.’)
document.write(require(’./module.js’))创建配置文件webpack.config.js
1.创建文件
var webpack = require(’webpack’)
module.exports = {
entry: ’./entry.js’,
output: {
path: __dirname,
filename: ’bundle.js’
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式：require(’./style.css’)
{test: /\.css$/, loader: ’style-loader!css-loader’}
]
}
}2.修改 entry.js 中的 style.css 加载方式：require(’./style.css’)
3.运行webpack
在命令行页面直接输入webpack
插件使用
1.插件安装
//添加注释的插件
npm install --save-devbannerplugin2.配置文件的书写
var webpack = require(’webpack’)
module.exports = {
entry: ’./entry.js’,
output: {
path: __dirname,
filename: ’bundle.js’
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式：require(’./style.css’)
{
test: /\.css$/,
loader: ’style-loader!css-loader’
}
],
plugins: [
//添加注释的插件
new webpack.BannerPlugin(’This file is created by zhaoda’)
]
}
}3.运行webpack
// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */开发环境
webpack
--progress : 显示编译的进度
--colors ：带颜色显示，美化输出
--watch：开启监视器，不用每次变化后都手动编译
12.4.7.1. webpack-dev-server
开启服务,以监听模式自动运行
1.安装包
npm install webpack-dev-server -g --save-dev2.启动服务
实时监控页面并自动刷新
webpack-dev-server --progress --colors自动编译
1.安装插件
npm install --save-dev html-webpack-plugin2.在配置文件中导入包
var htmlWebpackPlugin = require(’html-webpack-plugin’)3.在配置文件中使用插件
plugins: [
//添加注释的插件
new webpack.BannerPlugin(’This file is created by zhaoda’),
//自动编译
new htmlWebpackPlugin({
title: "index",
filename: ’index.html’, //在内存中生成的网页的名称
template: ’./index.html’ //生成网页名称的依据
})
]4.运行项目
webpack--save-dev相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
调用模式与this绑定
在实战项目中怎样使用jquery layur弹出层

在webpack中如何实现多页面开发

这篇文章主要介绍了webpack多页面开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
写在前面
webpack是一款模块加载器兼打包工具，能把js,css,页面，图片，视频等各种资源，进行模块化处理。而现在网上流传很多单页面的webpack模型，那多页面呢？比较少，现在我提供一个多页面的前端模型。希望大家适合使用。
在最开始接触webpack的时候，我都觉得webpack只适用于单页面应用，比如webpack+react，webpack+vue。我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便。基于实际项目需求，我在想，多页面站点是否也能使用webapck来构建呢？于是就开始了一番探索，最终算是搭建了一套比较完整的解决方案。
本文以一个实际项目为例子，讲述在多页面项目中如何使用webpack进行工程化构建。本文是自己的实践经验总结，所以有些解决方案并不是最优的，仍在探索优化中，如果有什么错误纰漏，欢迎指出。
简介
本项目主要基于webpack2.x构建，以gulp作为辅助工具。前端使用art-template作为模板引擎，一个页面对应一个模板文件和一个入口文件，入口文件中可以通过import或require引入其他模块，这些模块webpack会自动跟入口文件合并为一个文件。
前端开发环境搭建
主要目录结构
├─dist #打包后生成的文件目录
└─src #开发目录
├─components #通用组件
├─static #静态资源目录
│ ├─css
│ ├─img
│ └─js
│ ├─component #站点通用组件对应的js
│ ├─lib #第三方js库
│ ├─services #各页面入口
│ └─util #通用工具js
├─template #html模板
└─views #页面
main.js #公共入口
gulpfile.js #gulp任务配置
package.json #项目依赖
webpack.config.js #webpack配置webpack配置
入口文件
// 获取入口文件
var entries = (function() {
var jsDir = path.resolve(__dirname, ’src/static/js/services’);
var entryFiles = glob.sync(jsDir + ’/*.js’);
var map = {};
entryFiles.forEach(function(filePath) {
var filename = filePath.substring(filePath.lastIndexOf(’\/’) + 1, filePath.lastIndexOf(’.’));
map = filePath;
});
return map;
})();该方法将生成文件名到文件绝对路径的map， 比如
entry: {
’page-1’: ’/../webpack-multipage-demo/src/static/js/services/page-1.js’
}热更新
热更新简直不要太好用，极大地提高了开发效率。
//服务器配置
var devServer = env === ’production’ ? {} : {
contentBase: path.resolve(__dirname),
compress: true,
historyApiFallback: true,
hot: true,
inline: true,
host: ’localhost’,
port: 8080
};另外，在plugin中加入new webpack.HotModuleReplacementPlugin()，开启Hot Module Replacemen，即可实现热更新。
生成html配置
约定同一页面的js文件与模板文件命名一致，最终根据该js生成与其同名的html文件。
var htmlPages = (function() {
var artDir = path.resolve(__dirname, ’src/views’);
var artFiles = glob.sync(artDir + ’/*.art’);
var array = ;
artFiles.forEach(function(filePath) {
var filename = filePath.substring(filePath.lastIndexOf(’\/’) + 1, filePath.lastIndexOf(’.’));
array.push(new HtmlWebpackPlugin({
template: path.resolve(__dirname, ’src/template/index.html’),
filename: filename + ’.html’,
chunks: ,
chunksSortMode: function(chunk1, chunk2) {
var order = ;
var order1 = order.indexOf(chunk1.names);
var order2 = order.indexOf(chunk2.names);
return order1 - order2;
},
minify: {
removeComments: env === ’production’ ? true : false,
collapseWhitespace: env === ’production’ ? true : false
}
}));
});
return array;
})();通用模块提取为组件
对于一些在多个页面中都需要用到的模块，可将其提取出来作为通用的组件。组件的构成与页面一样，一个.js文件和一个.art文件以及一个.css文件，在js文件中渲染html内容，最后export，使用时直接require即可。具体实践可参考demo
存在问题
每新建一个页面就需要重新启动webpack服务
字体文件无法压缩，对于压缩通过font-face引入的网络字体，目前没有找到较好的解决方案
demo
基于本文理论的一个demo，地址：webpack-multipage-demo
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在Vue中如何实现数字输入框组件
使用jquery如何实现侧边栏左右伸缩效果
在JS函数中有关setTimeout详细介绍
在mongoose中有关于更新对象的详细介绍
在JavaScript中如何实现AOP