webpack（webpack到底怎么用）

本文目录

• webpack到底怎么用
• 【Web前端基础】webpack打包原理是什么
• webpack执行机制流程是怎么样的
• webpack到底有什么用
• 如何使用webpack搭建简单项目

webpack到底怎么用

30分钟手把手教你学webpack实战
首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下：
    Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：
支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
更多等等。。。带着这些问题我们慢慢来学习webpack。
https://www.cnblogs.com/tugenhua0707/p/4793265.html

【Web前端基础】webpack打包原理是什么

【Web前端基础】webpack打包原理是什么？1、概念
　　本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。
　　在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
2、分析
　　
　　1、人口文件
// mian.js
const a = require(’./m1’)
const b= require(’./m2’)
import { test } from ’./m1’
console.log(test)
　　
//m2.js
export default {
b:2
}
　　
//m1.js
export const test = {test:1}
export default {
a:1
}
　　
　　2、生产的文件
(function (modules) {
var installedModules = {}; //缓存
/*
* 加载模块函数
* 传入模块id
* */
function __webpack_require__(moduleId) {
// 检查缓存中是否有模块
if (installedModules) {
return installedModules.exports;
}
// 创建一个新模块，并缓存起来
var module = installedModules = {
i: moduleId,
l: false,
exports: {}
};
// 调模块的函数，modules
modules.call(module.exports, module, module.exports, __webpack_require__);
module.l = true;
// 返回对应模块
return module.exports;
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (module) {
var getter = module && module.__esModule ?
function getDefault() {
return module;
} :
function getModuleExports() {
return module;
};
__webpack_require__.d(getter, ’a’, getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = ““;

// 加载入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (module, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (module, __webpack_exports__, __webpack_require__) {
“use strict“;
Object.defineProperty(__webpack_exports__, “__esModule“, {value: true});
__webpack_exports__ = ({
a: 1
});
}),
(function (module, __webpack_exports__, __webpack_require__) {
“use strict“;
Object.defineProperty(__webpack_exports__, “__esModule“, {value: true});
__webpack_exports__ = ({
b: 2
});
})
]);
　　
　　观察以上代码得到结果：
　　1、打包后的代码是一个立即执行函数，且传入的参数为一个数组
　　2、参数数组就是我们引用的模块
　　3、每一个模块对应着数组的位置就是那么的id
　　4、在立即函数中加载入口文件，并执行
　　__webpack_require__ ： 加载并执行某一个模块并将模块缓存在 installedModules 中。
modules.call(module.exports, module, module.exports, __webpack_require__);
　　这里是执行引用的某一个模块。
　　并将module，exports，require 加入模块中。
　　这也是为什么我们在模块中有全局变量 module/exports/require
　　通过对打包后的文件分析，基本可以完全理解打包过程。

webpack执行机制流程是怎么样的

几乎所有业务的开发构建都会用到 webpack 。的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。 　　准备工作 　　1. webstorm 中配置 webpack-webstorm-debugger-script 　　在开始了解之前，必须要能对 webpack 整个流程进行 debug ，配置过程比较简单。 　　先将 webpack-webstorm-debugger-script 中的软件外包企业公司 置于 webpack.config.js 的同一目录下，搭建好你的脚手架后就可以直接 Debug 这个 webstorm-debugger.js 文件了。 　　2. webpack.config.js 配置 　　估计大家对 webpack.config.js 的配置也尝试过不少次了，这里就大致对这个配置文件进行个分析。 　　var path = require(’path’); 　　var node_modules = path.resolve(__dirname, ’node_modules’); 　　var pathToReact = path.resolve(node_modules, ’react/dist/react.min.js’); 　　module.exports = { 　　// 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。 　　entry: { 　　bundle: ; 　　} 　　... 　　// 与当前模块构建步骤相同 　　} 　　3. 构建细节 　　module 是 webpack 构建的核心实体，也是所有 module的 父类，它有几种不同子类：NormalModule , MultiModule ,ContextModule , DelegatedModule 等。但这些核心实体都是在构建中都会去调用对应方法，也就是 build() 。来看看其中具体做了什么: 　　// 初始化module信息，如context,id,chunks,dependencies等。 　　NormalModule.prototype.build = function build(options, compilation, resolver, fs, callback) { 　　this.buildTimestamp = new Date().getTime(); // 构建计时 　　this.built = true; 　　return this.doBuild(options, compilation, resolver, fs, function(err) { 　　// 指定模块引用，不经acorn解析 　　if(options.module && options.module.noParse) { 　　if(Array.isArray(options.module.noParse)) { 　　if(options.module.noParse.some(function(regExp) { 　　return typeof regExp === “string“ ? 　　this.request.indexOf(regExp) === 0 : 　　regExp.test(this.request); 　　}, this)) return callback(); 　　} else if(typeof options.module.noParse === “string“ ? 　　this.request.indexOf(options.module.noParse) === 0 : 　　options.module.noParse.test(this.request)) { 　　return callback(); 　　} 　　} 　　// 由acorn解析生成ast 　　try { 　　this.parser.parse(this._source.source(), { 　　current: this, 　　module: this, 　　compilation: compilation, 　　options: options 　　}); 　　} catch(e) { 　　var source = this._source.source(); 　　this._source = null; 　　return callback(new ModuleParseError(this, source, e)); 　　} 　　return callback(); 　　}.bind(this)); 　　}; 　　对于每一个 module ，它都会有这样一个构建方法。当然，它还包括了从构建到输出的一系列的有关 module 生命周期的函数

webpack到底有什么用

1. 为什么用 webpack?
他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.
2. Webpack 给 Browserify 的同学用
对应地:
browserify main.js 》 bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码.
3. 怎样启动 webpack
切换到有 webpack.config.js 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for production (minification)
webpack -p 来针对发布环境编译(压缩代码)
webpack --watch 来进行开发过程持续的增量编译(飞快地!)
webpack -d 来生成 SourceMaps
4. JavaScript 方言
Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
},
module: {
loaders: [
{ test: /\.coffee$/, loader: ’coffee-loader’ },
{ test: /\.js$/, loader: ’jsx-loader?harmony’ } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
},
module: {
loaders: [
{ test: /\.coffee$/, loader: ’coffee-loader’ },
{ test: /\.js$/, loader: ’jsx-loader?harmony’ }
]
},
resolve: {
// 现在可以写 require(’file’) 代替 require(’file.coffee’)
extensions:
}
};
5. 样式表和图片
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require(’./bootstrap.css’);
require(’./myapp.less’);
var img = document.createElement(’img’);
img.src = require(’./glyph.png’);
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀《style》标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
path: ’./build’, // 图片和 JS 会到这里来
publicPath: ’http://mycdn.com/’, // 这个用来成成比如图片的 URL
filename: ’bundle.js’
},
module: {
loaders: [
{ test: /\.less$/, loader: ’style-loader!css-loader!less-loader’ }, // 用 ! 来连接多个人 loader
{ test: /\.css$/, loader: ’style-loader!css-loader’ },
{test: /\.(png|jpg)$/, loader: ’url-loader?limit=8192’} // 内联 base64 URLs, 限定 《=8k 的图片, 其他的用 URL
]
}
};
6. 功能开关
有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:
if (__DEV__) {
console.warn(’Extra logging’);
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然后配置 Webpack 当中的对应全局变量:
// webpack.config.js
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || ’true’)),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || ’false’))
});
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
},
plugins:
};
然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.
7. 多个进入点(entrypoints)
比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 “main module“:
// webpack.config.js
module.exports = {
entry: {
Profile: ’./profile.js’,
Feed: ’./feed.js’
},
output: {
path: ’build’,
filename: ’.js’ // 模版基于上边 entry 的 key
}
};
针对 profile, 在页面当中插入 《script src=“build/Profile.js“》《/script》. feed 页面也是一样.
8. 优化共用代码
feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.
// webpack.config.js
var webpack = require(’webpack’);
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin(’common.js’);
module.exports = {
entry: {
Profile: ’./profile.js’,
Feed: ’./feed.js’
},
output: {
path: ’build’,
filename: ’.js’
},
plugins:
};
在上一个步骤的 script 标签前面加上 《script src=“build/common.js“》《/script》 你就能得到廉价的缓存了.
9. 异步加载
CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.
声明你想要异步加载的那个“分界点“. 比如:
if (window.location.pathname === ’/feed’) {
showLoadingState();
require.ensure(, function() { // 语法奇葩, 但是有用
hideLoadingState();
require(’./feed’).show(); // 函数调用后, 模块保证在同步请求下可用
});
} else if (window.location.pathname === ’/profile’) {
showLoadingState();
require.ensure(, function() {
hideLoadingState();
require(’./profile’).show();
});
}
Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.
Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.
// webpack.config.js
output: {
path: “/home/proj/public/assets“, // path 指向 Webpack 编译能的资源位置
publicPath: “/assets/“ // 引用你的文件时考虑使用的地址

如何使用webpack搭建简单项目

1.在电脑上安装Node

2.随便创建一个空文件夹

3.打开DOS窗口进入这个文件夹

4.使用npm init初始化package.json文件

5.在DOS窗口输入：npm install webpack --save-dev安装 webpack

6.安装好webpack后新建index.html

7.创建webpack.config.js 这里放的是webpack基本配置

const path=require(’path’);

module.exports={

entry:’./src/index.js’,//指定程序的入口文件

output:{//指定打包后的文件路径和名称

path:path.resolve(__dirname, ’./dist/’),

filename:’bundle.js’

},

module:{},//用来存放依赖的模块

plugins:,//用来存放依赖的插件

}

8.使用npm install 安装依赖

9.使用npm run dev执行打包的操作就可以了

具体步骤给出参考网址：

https://blog.csdn.net/weixin_34221112/article/details/87418625