webpack打包

Webpack打包

万次阅读 2020-02-21 18:36:50

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。为什么使用webpack 现在是...

image.png

一. 概述

什么是webpack

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什么使用webpack

现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便。

模块化 可以使复杂的程序细化成为各个小的文件
预处理器 可以对Scss，less等CSS预先进行处理
......

二. weback使用流程

1、创建项目

这里用的是命令创建项目，当然你也可以去鼠标右键创建项目

mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件
touch main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件

mkdir：创建文件夹
cd ..：返回所在目录的上级目录
touch：创建文件
app：用来存放原始数据和我们将写的JavaScript模块
common：用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）

目录结构

基础代码
index.html是主入口，需要设置根目录并且将打包后的文件导入

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

app.js是我们写的模块,并依据CommonJS规范导出这个模块,这里我们以输出welcome to use webpack为例

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "welcome to use webpack!";
  return greet;
}

main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中

const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());

2. 安装

因为安装webpack要用npm,所以安装之前我们首先要安装node
第一步 要在项目根目录用npm init初始化，生成package.json文件

npm init

初始化过程中会有好多提示，如果非正式项目下可以直接回车调过，括号里的都是默认的,正式项目下可以根据情况填写每一步

name: (webpackDemo) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (index.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者创始人
 license: (ISC) //许可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) // 这里直接输入yes就可以了

第二步 安装webpack

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

如果不想安装最新的版本那么得在webpack后面加一个@然后在填入你要安装的版本号，当然安装最新版本时可以加@版本号也可以不加@版本号

npm install webpack@xx -g
npm install webpack@xx --save-dev

webpack有两个版本分别是webpack2和webpack4，这两个版本安装配置有差异。
先来看看webpack2
本次安装的是3.5.6的版本，运行的是以下命令

npm install webpack@3.5 --save-dev

接下来看下我们创建的package.json文件,里面的都是我们刚配置的

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.6"
  }
}

接下来看webpack4
webpack4版需要去额外安装webpack-cli

npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev

接下来看下配置文件

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
  }
}

注意：package.json文件中不能有注释，在运行的时候请将注释删除

第三步 使用Webpack打包
webpack可以在终端中使用，基本的使用方法如下：

// webpack2的命令
node_modules/.bin/webpack app/main.js common/index.js 
// webpack4的命令
node_modules/.bin/webpack app/main.js -o common/index.js

app/main.js：是入口文件的路径，本文中就是上述main.js的路径
common/index.js：是打包文件的存放路径

注意：是非全局安装情况
webpack2打包命令执行后

webpack4打包命令执行后
如果你的webpack是最新的版本webpack4那么就不能用webpack2的打包命令，如果用webpack2的命令会报错打包失败，如下：

黄色部分：webpack4是需要指定打包为开发环境还是生产环境的，目前我们没有指定是什么环境所以就会有这个警告

红色部分：因为webpack4的打包命令和webpack2的打包命令不同，所以用webpack2的打包命令时就会提示打包的路径找不到

如果你用webpack4的打包命令，打包如下

黄色警告下面会解决这个问题
从打包的结果可以看出webpack同时编译了main.js 和app,js，并且打包成功，现在打开编辑器，可以看到如下结果

webpack2的打包文件

webpack4的打包文件

接下来我们在看下页面

是不是很激动我们已经将welcome to use webpack!在页面打包生成，但是这种方式需要在终端运行复杂的命令而且容易出错很不方便，如果能更方便点就好了，那么接下来我们在看下它的升级版打包。

第四步 通过配置文件webpack.config.js来使用webpack
Webpack拥有很多其它的比较高级的功能，这些功能其实都可以通过命令行模式实现，但是在终端中进行复杂的操作，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。
在当前项目webpackDemo文件夹下新创建一个文件webpack.config.js,写入简单的配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径

// webpack2的配置
module.exports = {
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}
// webpack4的配置
module.exports = {
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "development",
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack(全局情况下)或node_modules/.bin/webpack(非全局安装需使用)命令就可以了，不需要再命令行打入主入口和打包文件的路径了，这条命令会自动引用webpack.config.js文件中的配置选项。
示例如下：

是不是很简单这样我们就不用再终端输入那么多烦人的配置文件的路径了，那么如果node_modules/.bin/webpack这条命令都不用在终端输入，是不是更简单呢？，接下来接着往下看。
更加方便的打包操作
根据上面的方式来看我们只要配置了webpack.config.js就可以将打包的路径命令省去，那么我们想是否可以以这种方式将node_modules/.bin/webpack命令省去呢？答案是可以，只不过不是在这个文件内配置，也不用去新建文件配置。
npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.6"
  }
}

注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。
npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，我们在命令行中输入npm start，看看输出结果是什么，输出结果如下：

现在只需要使用npm start就可以打包文件了，有没有觉得webpack也不过如此嘛，不过不要太小瞧webpack，要充分发挥其强大的功能我们还需要配置很多。

收起

展开全文

webpack 打包

2018-12-27 11:17:41

webpack 中每个模块有一个唯一的 id，是从 0 开始递增的。整个打包后的 bundle.js 是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个 function。 function 的内容则为每个模块的内容，并按照 require ...

webpack 中每个模块有一个唯一的 id，是从 0 开始递增的。
整个打包后的 bundle.js 是一个匿名函数自执行。
参数则为一个数组。数组的每一项都为个 function。
function 的内容则为每个模块的内容，并按照 require 的顺序排列。

识别入口文件,识别模块依赖，来打包代码。webpack做的就是分析代码,转换代码，编译代码，输出代码

Webpack的两个最核心的原理分别是：

一切皆模块

正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模块。
因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。
这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

按需加载

传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。
但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。
因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

如何实现一个简单的webpack

读取文件分析模块依赖
对模块进行解析执行(深度遍历)
针对不同的模块使用相应的loader
编译模块，生成抽象语法树AST。
循环遍历AST树，拼接输出js。

loader原理

在解析对于文件，会自动去调用响应的loader,
loader 本质上是一个函数，输入参数是一个字符串，输出参数也是一个字符串。
当然，输出的参数会被当成是 JS 代码，从而被 esprima 解析成 AST，触发进一步的依赖解析。
webpack会按照从右到左的顺序执行loader。

一种正确的思路是：

使用JS代码解析工具（如esprima或者acorn），
将JS代码转换成抽象语法树（AST），
再对AST进行遍历。
这部分的核心代码是 parse.js。

webpack优化

externals配置优化 :使用 externals 将第三方库以 cdn 的方式去引入
设置externals配置项分离不需要打包的库文件，然后在模版文件中使用script引入即可，配置代码片段如下：

externals: {
  'jquery': 'jquery'
},

entry: {
    entry: './src/main.js',
    vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
},
// 这里的output为base中的output，不是生产的output
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    libraryTarget: "umd",
    publicPath: process.env.NODE_ENV === 'production' ?
        config.build.assetsPublicPath : config.dev.assetsPublicPath
},
externals: {
    echarts: 'echarts',
    _: 'lodash'
}

CDN: 背景图片会有问题

url-loader中单独配置cdn，做到js访问线上路径，静态资源使用cdn，两者互不影响

url-loader不能检测到js中的background，所以我们凡是在js中引用的地址，必须在外面先import这张图片，url-loader才会解析并打包

打包后的js过大，将js打包多个文件

由于webpack打包后的js过大，以至于在加载资源时间过长。所以将文件打包成多个js文件，在需要的时候按需加载。优化方案：

entry:{ 
 main:'xxx.js'
} 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下边return参考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 以下才是关键
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) 
}

使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码，使用方法如下：

plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({    warnings: false,
   compress: {
       join_vars: true,
       warnings: false,
   },
   toplevel: false,
   ie8: false,
]

优化
1.缩小文件搜索范围,配置比如resolve.modules,resolve.modules,resolve.mainFields,resolve.alias ,resolve.extensions ,module.noParse 配置

2.使用DllPlugin 要给 Web 项目构建接入动态链接库

3.HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程

4.当 Webpack 有多个 JavaScript 文件需要输出和压缩时，原本会使用 UglifyJS 去一个个挨着压缩再输出，但是 ParallelUglifyPlugin 则会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成

5.可以监听文件的变化，当文件发生变化后可以自动刷新浏览器，从而提高开发效率。

6.(Hot Module Replacement)的技术可在不刷新整个网页的情况下做到超灵敏的实时预览。原理是当一个源码发生变化时，只重新编译发生变化的模块，再用新输出的模块替换掉浏览器中对应的老模块。

7.Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出

8.可以使用CommonsChunkPlugin 把多个页面公共的代码抽离成单独的文件进行加载

9.Webpack 内置了强大的分割代码的功能去实现按需加载，可以用import实现路由按需加载。

10.Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快，它又译作 “作用域提升”

11.可以使用可视化分析工具 Webpack Analyse等去分析输出结果，从页进行优化.
对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩

12.优化图片，对于小图可以使用 base64 的方式写入文件中
给打包出来的文件名添加哈希，实现浏览器缓存文件

收起

展开全文

【前端知识点】webpack 打包 + es6 + react入门（一）webpack打包

千次阅读 2016-08-01 10:53:58

webpack 打包 + es6 + react入门本文主要针对webpack打包流程，注意事项，es6新特性变化，以及es6 开发react的入门教程： webpack打包流程 webpack注意事项 webpack，gulp，grunt差异对比 webpack进阶：关于加载优化...

webpack 打包 + es6 + react入门

本文主要针对webpack打包流程，注意事项，es6新特性变化，以及es6 开发react的入门教程：

webpack打包流程
webpack注意事项
webpack，gulp，grunt差异对比
webpack进阶：关于加载优化与缓存
es6 新标准及新特性
es6 核心特性分析
react 基本语法
react 生命周期
react 父子组件的通信总结
【第一部分】Webpack入门

webpack打包流程


  React开发和模块管理的主流工具webpack也被大家所熟知。 

  web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。






webpack特性

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

序号
  特点
  备注
1
  对 CommonJS 、 AMD 、ES6的语法做了兼容
  兼容性强
2
  对js、css、图片等资源文件都支持打包
  打包范围广
3
  串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
  灵活易扩展
4
  有独立的配置文件webpack.config.js
  独立配置，高内聚
5
  可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
  按需，高效，低耦合
6
  支持 SourceUrls 和 SourceMaps，易于调试
  [不很懂]就是即使代码压缩，也可以转化为非混淆压缩形式调试
7
  具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
  灵活
8
  webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
  异步，缓存，性能优
1.相比Grunt，WebPack除了具备丰富的插件外，同时带有一套加载（Loader）系统。使它支持多种规范的加载方式，包括ES6、CommonJS、AMD等方式，这是Grunt、Gulp所不具备的。 

2.代码混淆的角度来看，WebPack更加的极致 

3.代码分片为处理单元（而不是文件），使得文件的分片更为灵活。



Webpack安装和配置

1.安装
webpack 可以作为全局的npm模块安装，也可以在当前项目中安装。
npm install -g webpack //全局安装
npm install --save-dev webpack //产品模式用dependencies，开发模式用devDep; save就是存到依赖列表里package.json

全局安装的webpack，直接执行webpack命令，会默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：



webpack -config webpack.chauncey.config.js //指定新文件

配置
每个项目下需配置一个webpack.config.js, 如同gulpfile.js/Gruntfile.js， 通俗一点，他就是你的一个初始化设置，配置项，告诉webpack，你想怎么去处理你的文件。


环境变量 

通过NODE_ENV可以来设置环境变量（默认值为development）。区分开发和生产环境，对于文件的不同处理。 

linux & mac: export NODE_ENV=production 

windows:set NODE_ENV=production 

运行前可以设置当前环境，SET NODE_ENV=production（开发环境） 

set PORT=1234设置接口



entry 

entry参数： 打包的输入文件，参数值代表输出后文件形式，字符串（单个文件）、数组（一大个文件）、对象（不同属性为不同文件）

{
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"],
        page3: {
            subp1: "./sp1",
            subp2: "./sp2"
        }

    },
    output: {
        path: "dist/js/page",//目标目录【文件夹】
        publicPath: "/output/",
        filename: "[name].bundle.js"
    }
}

output 

output参数为对象，定义了输出文件的位置及名字



    output: {
        path: "dist/js/page",//打包文件存放的绝对路径
        publicPath: "/output/",//网站运行时的访问路径
        filename: "[name].bundle.js"//打包后的文件名
    }

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字.

module 

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上：



module: {
   //加载器配置
   loaders: [
       //.css 文件使用 style-loader 和 css-loader 来处理
       { test: /\.css$/, loader: 'style-loader!css-loader' },

       //.js 文件使用 jsx-loader 来编译处理
       { test: /\.js$/, loader: 'jsx-loader?harmony' },

       //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
       { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},

       //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
       { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
   ]
}

其中， test：表示匹配的资源类型； 

loader或loaders：表示用来加载这种类型资源的loader（加载器）；[可参考using loaders] 
！  用来定义loader的串联关系，”-loader”是可以省略不写的，多个loader之间用“!”连接起来，但所有的加载器都需要通过 npm 来加载。

此外，还可以添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器：



{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

给css和less还有图片添加了loader之后，我们不仅可以像在node中那样require js文件了，我们还可以require css、less甚至图片文件：



 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

注意，require()还支持在资源path前面指定loader，即require(![loaders list]![source path])形式：



require("!style!css!less!bootstrap/less/bootstrap.less");
// “bootstrap.less”这个资源会先被"less-loader"处理，
// 其结果又会被"css-loader"处理，接着是"style-loader"
// 可类比pipe操作

require()时指定的loader会覆盖配置文件里对应的loader配置项。

resolve 

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全文件后缀：



resolve: {
    //查找module的话从这里开始查找
    root: '/pomy/github/flux-example/src', //绝对路径

    //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    extensions: ['', '.js', '.json', '.scss'],

    //模块别名定义，方便后续直接引用别名，无须多写长长的地址
    alias: {
        AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
        ActionType : 'js/actions/ActionType.js',
        AppAction : 'js/actions/AppAction.js'
    }
}

然后我们想要加载一个js文件时，只要require(‘common’)就可以加载common.js文件了。 

注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.

plugin 

webpack提供了[丰富的组件]用来满足不同的需求，当然我们也可以自行实现一个组件来满足自己的需求：



plugins: [
     //your plugins list
 ]

在webpack中编写js文件时，可以通过require的方式引入其他的静态资源，可通过loader对文件自动解析并打包文件。通常会将js文件打包合并，css文件会在页面的header中嵌入style的方式载入页面。但开发过程中我们并不想将样式打在脚本中，最好可以独立生成css文件，以外链的形式加载。这时extract-text-webpack-plugin插件可以帮我们达到想要的效果。需要使用npm的方式加载插件，然后参见下面的配置，就可以将js中的css文件提取，并以指定的文件名来进行加载。



npm install extract-text-webpack-plugin --save-dev



plugins: [
    new ExtractTextPlugin('styles.css')
]

externals 

当我们想在项目中require一些其他的外部类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：



externals: {
    "jquery": "jQuery"
}

这样我们就可以放心的在项目中使用这些API了：var jQuery = require(“jquery”);

context 

当我们在require一个模块的时候，如果在require中包含变量，像这样：



require("./mods/" + name + ".js");

那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：

1.分析目录：’./mods’；  

2.提取正则表达式：’/^.*.js$/’；

于是这个时候为了更好地配合webpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：



var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

关于 webpack.config.js 更详尽的配置可以参考这里



webpack常用命令

webpack的使用通常有三种方式：

1、命令行使用：webpack 

var webpack = require('webpack');
webpack({
//configuration
}, function(err, stats){});

3、默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：webpack –config webpack.custom.config.js 

webpack 的执行也很简单，直接执行



$ webpack --display-error-details

即可，后面的参数“–display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。 
常用命令 

webpack的使用和browserify有些类似，下面列举几个常用命令：



即可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
常用命令
webpack的使用和browserify有些类似，下面列举几个常用命令：

前面的四个命令比较基础，使用频率会比较大，后面的命令主要是用来定位打包时间较长的原因，方便改进配置文件，提高打包效率。



图片打包和静态资源服务器

图片打包 

webpack中对于图片的处理，可以通过url-loader来实现图片的压缩。



div.img{
    background: url(../image/xxx.jpg)
}

//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);

针对上面的两种使用方式，loader可以自动识别并处理。根据loader中的设置，webpack会将小于指点大小的文件转化成 base64 格式的 dataUrl，其他图片会做适当的压缩并存放在指定目录中。



module: {
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=10000&name=build/[name].[ext]'
    }]
}

对于上面的配置，如果图片资源小于10kb就会转化成 base64 格式的 dataUrl，其他的图片会存放在build/文件夹下。

静态资源服务器

除了提供模块打包功能，Webpack还提供了一个基于Node.js Express框架的开发服务器，它是一个静态资源Web服务器，对于简单静态页面或者仅依赖于独立服务的前端页面，都可以直接使用这个开发服务器进行开发。在开发过程中，开发服务器会监听每一个文件的变化，进行实时打包，并且可以推送通知前端页面代码发生了变化，从而可以实现页面的自动刷新。

Webpack开发服务器需要单独安装，同样是通过npm进行：



npm install -g webpack-dev-server

可以使用webpack-dev-server直接启动，也可以增加参数来获取更多的功能，具体配置可以参见官方文档。默认启动端口8080，通过localhost:8080/webpack-dev-server/可以访问页面，文件修改后保存时会在页面头部看到sever的状态变化，并且会进行热替换，实现页面的自动刷新。



Webpack注意事项-Tips

1.建议，主页尽量做到最精简，毕竟决定用户存留时间。按需。 

2.【推荐很好】http://www.cnblogs.com/giveiris/p/5237080.html  

【前端构建】WebPack实例与前端性能优化 

3.【有雪碧图，gulp和webpack】【基于webpack搭建纯静态页面型前端工程解决方案模板】https://github.com/chemdemo/webpack-seed 

4.所有资源都是模块。



Webpack、gulp、grunt异同

webpack实践

webpack安装



npm install webpack -g

webpack配置



// webpack.config.js
var path = require("path");
module.exports = {
  entry: './public/js/entry.js', //演示单入口文件
  output: {
    path: path.join(__dirname, './public/pro'),  //打包输出的路径
    filename: 'bundle.js',            //打包后的名字
    publicPath: "./pro"             //html引用路径，在这里是本地地址。
  }
};

编写入口文件 

接下来就编写我们的入口文件 entry.js 和第一个模块文件 module1.js 。我们一切从简，里面只用来加载一个Js模块。



// entry.js
require("./module1"); // 使用CommonJs来加载模块



// module1.js
console.log("hello,world! module1");
document.write("超哥威武");

启动webpack

一切准备好后，我们仅需要在项目根目录下，用命令行 webpack 执行一下即可。



// webpack 命令行的几种基本命令

$ webpack // 最基本的启动webpack方法
$ webpack -w // 提供watch方法，实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩，提供production
$ webpack -d // 提供source map，方便调试。

多模块依赖 

跑通webpack打包entry，现在尝试commonjs和amd，两种模块机制。



require(["./module3"], function(){
  console.log("hello,world! module1&&require(module3)");
  document.write("超哥威武");
});




// module2.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
  return a + b;
}



// module3.js，使用AMD模块机制
define(['./module2.js'], function(sum){
  return console.log("1 + 2 = " + sum(1, 2));
})

混用两种不同机制非常不好，这里仅仅是展示用的； 

在开发新项目时还是推荐CommonJs或ES2015的Module。ES2015的模块机制，是趋势。【这一块我会报个小错误，没有完全实现】

【loader加载器】

预处理器做一些CoffeeScript 和 Sass 的编译。我们以前要编译这些预处理器，用 gulp相对复杂，webpack可以一次性解决！

在这里我们用Sass和babel编译ES2015为例子，看一下loader是如何使用的。

安装loader



npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

配置loader



// webpack.config.js
module.exports = {
  entry: path.join(__dirname, 'src/entry.js'),
  output: {
    path: path.join(__dirname, 'out'),
    publicPath: "./out/",
    filename: 'bundle.js'
  },
  // 新添加的module属性
  module: {
    loaders: [
      {test: /\.js$/, loader: "babel"},
      {test: /\.css$/, loader: "style!css"},
      {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
      {test: /\.scss$/, loader: "style!css!sass"}
    ]
  }
};




【webpack进阶：关于加载优化与缓存，及版本控制】

1.uglify 

webpack提供插件UglifyJsPlugin，可以优化（支持压缩、混淆）代码。 

配置以下列表，在混淆代码时，以下配置的变量，不会被混淆



new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
})

以上变量‘super′,‘’, ‘exports’ or ‘require’，不会被混淆

example



var UglifyJsPlugin = require("../../node_modules/webpack/lib/optimize/UglifyJsPlugin");

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js",
    },
    plugins: [
        //使用丑化js插件
        new UglifyJsPlugin({
            compress: {
                warnings: false
            },
            mangle: {
                except: ['$scope', '$']
            }
        })
    ]
};



//entry.js
define("entry", function () {
    //变量 iabcdef 已引用，混淆
    var iabcdef = 11;
    //变量 $scope 已引用，但不混淆
    var $scope = "scope";

    document.write("entry module" + iabcdef);
    document.write($scope);

    //变量 ixzy 未被引用，剔除
    var ixzy = 3241;
});

2.版本控制 

对于静态资源的版本控制，目前微信项目采取办法是版本号作为请求参数，版本号为发布日期，但有两个问题： 

1、更新版本时，CDN不能及时更新； 

2、没有发生变更的文件也被赋上新版本

Webpack的做法是，生成hash，区分文件。 

配置方法



//所有代码块添加hash
module.exports = {
    entry: "./entry.js",
    output: {
        path: "assets/[hash]/",
        publicPath: "assets/[hash]/",
        filename: "bundle.js"
    }
};



生成单个代码块文件的hash 

配置方法



//单个代码块添加hash
module.exports = {
    entry: "./entry.js",
    output: {
        path: "build/",
        publicPath: "build/",
        chunkFilename: "[id].[hash].bundle.js",
        filename: "output.[hash].bundle.js",
    }
};

【关于：chunkFilename意义】 
http://react-china.org/t/webpack-output-filename-output-chunkfilename/2256

3.如何缓存
缓存控制要做到两件事情，提到缓存命中率
对于没有修改的文件，从缓存中获取文件

对于已经修改的文件，不要从缓存中获取

围绕这两点，演绎出了很多方案，此处列两种：
不处理，等待用户浏览器缓存过期，自动更新。这是最偷懒的，命中率低一些，同时可能会出现部分文件没有更新，导致报错的情况。


Http头对文件设置很大的max-age，例如1年。同时，给每个文件命名上带上该文件的版本号，例如把文件的hash值做为版本号，topic. ef8bed6c.js。即是让文件很长时间不过期。



当文件没有更新时，使用缓存的文件自然不会出错；


当文件已经有更新时，其hash值必然改变，此时文件名变了，自然不存在此文件的缓存，于是浏览器会去加载最新的文件。


从上面的截图可以看出来，通过WebPack是可以很轻松做到第二点的——只需要给文件名配置上[chunkhash:8]即可，其中8是指hash长度为8，默认是16。

output{
  path: _dirname + '/release/',
  filename: '[chunkhash:8].[name].js',
  chunkFilename: '[name].[chunkhash:8].js'
}

P.S.这样的处理效果已经很好了，但同样有劣处，即浏览器给这种缓存方式的缓存容量太少了，只有12Mb，且不分Host。所以更极致的做法是以文件名为Key，文件内容为value，缓存在localStorage里，命中则从缓存中取，不命中则去服务器取，虽然缓存容量也只有5Mb，但是每个Host是独享这5Mb的。

4.自动生成页面 

文件名带上版本号后，每一次文件变化，都需要Html文件里手动修改引用的文件名，这种重复工作很琐碎且容易出错。html内部文件的名字如何动态改变。

使用 HtmlWebpackPlugin 和 ExtractTextPlugin 插件可以解决此问题。

生成带js的页面

【参考】http://www.cnblogs.com/haogj/p/5160821.html



new HtmlWebpackPlugin({
        filename: 'index.html',
        template: __dirname + '/public/index.html',
        inject: true,//是否injection 
        chunks: ['page1'],//所要控制的模块组

        //排序
        chunksSortMode: function(a, b){
            var index = {'page1': 1},
                aI = index[a.origins[0].name],
                bI = index[b.origins[0].name];
            return aI&&bI ? bI - aI : -1;
        }
    }),

生成带css的页面 

　　new ExtractTextPlugin(“comm.[contenthash:9].css”)

　　插件介绍到此为止，然而，还有一个关于同步加载和异步加载的问题，否则入口文件还是会很臃肿。

5.同步/异步加载
一个原则是：首屏需要的同步加载，首屏过后才需要的则按需加载（异步）
同步的代码会被合成并且打包在一起； 

异步加载的代码会被分片成一个个chunk，在需要该模块时再加载，即按需加载。 

同步加载过多代码会造成文件过大影响加载速度，异步过多则文件太碎，造成过多的Http请求，同样影响加载速度。 
同步写法
var TopicItem = require('../topic/topicitem');

异步写法



require.ensure([], function(){
    //to do
});



【遗留问题】

webpackJsonp is not defined 

是因为commonschunkplugin引用了，但是页面没用到。
路径问题：  

entry: { 

   page1: [‘./public/js/entry.js’], //演示单入口文件 path.join(__dirname, ‘./public/pro’) 

   page2: [‘./public/js/module1.js’] 

}, 

路径必须加./相对地址，否则会报错publick/js**
3.待学习的： 

1）webpack在PC项目中的应用 
http://web.jobbole.com/85396/ 

2）基于 Webpack 和 ES6 打造 JavaScript 类库 
http://web.jobbole.com/84858/ 

3）webpack使用优化 
http://web.jobbole.com/84847/ 

4）彻底解决 webpack 打包文件体积过大 
http://www.jianshu.com/p/a64735eb0e2b 
5）大公司里怎样开发和部署前端代码 
https://github.com/fouber/blog/issues/6

【第二部分】ES6新特性

序号	特点	备注
1	对 CommonJS 、 AMD 、ES6的语法做了兼容	兼容性强
2	对js、css、图片等资源文件都支持打包	打包范围广
3	串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持	灵活易扩展
4	有独立的配置文件webpack.config.js	独立配置，高内聚
5	可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间	按需，高效，低耦合
6	支持 SourceUrls 和 SourceMaps，易于调试	[不很懂]就是即使代码压缩，也可以转化为非混淆压缩形式调试
7	具有强大的Plugin接口，大多是内部插件，使用起来比较灵活	灵活
8	webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快	异步，缓存，性能优

收起

展开全文

react grunt gulp nodejs

Webpack打包实例测试代码
2017-03-28 13:39:28
Webpack打包实例测试代码
收起
webpack打包node
2017-07-30 11:33:50
webpack打包node webpack-node node-webpack
收起
nodejs node
webpack打包原理
2021-03-09 19:47:30
webpack是什么,入口，出口，loader，简单打包，自动打包，加载器（css ,less,url,处理高级语法）文章目录系列文章目录前言一、webpack是什么？入口出口(output)loader二.最简单的打包三.自动打包四.加载器(css...
收起
vue.js
webpack 使用 (二）webpack 打包（详细介绍）
2020-06-10 15:46:23
目录 ...当我们对 js 、图片等打包，打包的话就需要用到配置，就会涉及到 webpack 的结构 1. 入口：entry 2. 出口：output 3. 插件：plugins 4. 服务器设置：devServer 5. 转换：loades 6. m..
收起
新版Webpack打包方法
2020-11-09 21:46:22
版本： webpack：5.4.0 webpack-cli：4.2.0 测试一测试目录与内容： ...1.新版用webpack打包时需要加-o选项，反面...2.新版用webpack打包时需要加完整的相对路径名（即使是当前目录也要加./），反面教材： ...
收起
webpack打包项目
2017-10-31 09:36:23
webpack打包项目安装好npm 创建项目文件夹，webpack sample 安装webpack 全局安装：npm install -g webpack - 局部安装：npm install –save-dev webpack
收起
webpack打包+调试
千次阅读 2018-10-12 22:55:26
title: webpack打包+调试 copyright: true categories: 前端 tags: [webpack] password: 本文基于webpack4.20.2，仅讲解webpack打包操作，以及打包好的js文件的调试，一些配置或者和vue整合还是要看其它资料文章...
收起
source-map 调试
webpack打包顺序
2020-10-11 18:55:06
一、Webpack 打包流程 webpack的编译都按照下面的钩子调用顺序执行 1、entry-option,初始化option 2、run,开始编译 3、make,从entry开始递归的分析依赖，对每个依赖模块进行build 4、before-resolve,对模块位置进行...
收起
webpack打包原理解析
千次阅读 2019-04-29 17:51:19
文章目录webpack打包是如何运行的webpack对CommonJS的模块化处理webpack对es6 Module模块化的处理webpack文件的按需加载按需加载输出代码分析总结 webpack打包是如何运行的也可以称为，webpack是如何实现模块化的 ...
收起
webpack打包工具
2018-10-28 00:57:09
或者cnpm install webpack -g 淘宝镜像 mkdir 创建文件夹 cd 进入文件夹 ls查看文件里的内容 vs打开你创建的文件里面...第一种常见解决方案: 因为在老版本中Webpack打包命令是 webpack .\src\...
收起
端口
vue vue-cli webpack打包部署上线前的配置操作，初建vue项目 webpack打包需要注意的配置
2019-01-16 16:49:12
第一次全新vue项目，webpack打包给后台前，首先需要修改一下配置文件，很多人都遇到打包后运行一片空白这个问题，这个主要就是因为路径所产生的，主要需要修改config下面的index.js这个配置文件：如下图： ...
收起
webpack打包图片无法显示
2021-02-16 23:37:25
webpack打包图片无法显示新手小白学习webpack 打包图片过程中遇到的问题使用依赖版本文件相对目录和webpack.config.js 若删除options里面的publicPathError: Automatic publicPath is not supported in ...
收起
webpack打包计算器功能
2017-08-16 18:58:37
webpack打包计算器功能
收起
nodejs npm
webpack打包保留依赖
2020-05-17 14:23:05
在webpack打包的时候，有的依赖不想打入webapck中，可用以下方式保留依赖 externals: { 'vscode': 'commonjs vscode' } 详细可参考webpack的externals配置
收起
webpack打包demo
2018-08-02 18:47:09
Webpack 打包我的第一个demo 环境安装：node.js、npm、webpack 1.创建项目文件夹：在cmd输入mkdir myProject 执行成功： 2.进入项目文件夹：cd myProject 3.创建package.json文件：npm init 可填可不...
收起
webpack打包步骤
千次阅读 2018-09-18 11:48:32
webpack打包步骤： Webpack 是一个前端资源加载/打包工具。为什么不手动的复制粘贴，合并文件？ web业务越来越复杂和多元，所以目前讲究前端工程化。前端工程化的主要目标是解放生产力、提高生产效率。 1.安装...
收起
webpack打包原理入门探究（七）模板处理
2020-06-07 09:53:35
webpack打包原理入门探究（六）less|sass-loader初探 webpack打包原理入门探究（五）css-loader初探 webpack打包原理入门探究（五）loader初探（二） webpack打包原理入门探究（五）loader初探（一） webpack打包...
收起
vue react css js 人工智能
webpack打包原理浅析
2020-09-22 14:50:58
webpack打包原理本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,...
收起
webpack打包es6降级es5
2019-09-21 13:57:18
webpack打包es6降级es5配置
收起
es6 es5 babel
webpack打包基础
2018-02-24 12:57:39
对于webpack打包的理解：webpack是实现模块化开发的工具，他能自动处理js之间的依赖关系，将多个js模块打包成一个小的js文件，通过引入这个打包后js脚本来实现你所需要的功能。它依赖于node环境以及它的包管理器。他...
收起
jq项目webpack打包步骤
千次阅读 2020-04-17 12:45:36
webpack打包多html传统项目生成package.json文件 npm init -y 全局安装webpack cnpm install webpack -g 项目中安装，生成node_modules依赖 cnpm install webpack --save-dev cnpm install webpack-cli --save-...
收起
使用webpack.DllPlugin与webpack.DllReferencePlugin解决webpack打包慢问题
千次阅读 2017-08-06 23:21:28
因为公司的vue项目要与之前的结合，所以需要webpack打包后的代码，每次修改内容都需要重新打包，webpack打包速度太慢，因此上网搜索找到解决办法：使用webpack插件webpack.DllPlugin与webpack.DllReferencePlugin将...
收起

webpack打包

一、打包css

Webpack打包

一. 概述

二. weback使用流程

webpack 打包

【前端知识点】webpack 打包 + es6 + react入门（一）webpack打包

webpack 打包 + es6 + react入门

【第一部分】Webpack入门

webpack打包流程

webpack特性

Webpack安装和配置

webpack常用命令

图片打包和静态资源服务器

Webpack注意事项-Tips

Webpack、gulp、grunt异同

webpack实践

【webpack进阶：关于加载优化与缓存，及版本控制】

【遗留问题】

【第二部分】ES6新特性

Webpack打包实例测试代码

webpack打包node

webpack打包原理

webpack 使用 (二）webpack 打包（详细介绍）

新版Webpack打包方法

webpack打包项目

webpack打包+调试

webpack打包顺序

webpack打包原理解析

webpack打包工具

vue vue-cli webpack打包部署上线前的配置操作，初建vue项目 webpack打包需要注意的配置

webpack打包图片无法显示

webpack打包计算器功能

webpack打包保留依赖

webpack打包demo

webpack打包步骤

webpack打包原理入门探究（七）模板处理

webpack打包原理浅析

webpack打包es6降级es5

webpack打包基础

jq项目webpack打包步骤

使用webpack.DllPlugin与webpack.DllReferencePlugin解决webpack打包慢问题

webpack打包