webpack简介与使用

欢迎小伙伴们为 前端导航仓库 点star https://github.com/pfan123/fr...
前端导航平台访问

CommonJS 和 AMD 是用于 JavaScript 模块管理的两大规范，前者定义的是模块的同步加载，主要用于 NodeJS ；而后者则是异步加载，通过 RequireJS 等工具适用于前端。随着 npm 成为主流的 JavaScript 组件发布平台，越来越多的前端项目也依赖于 npm 上的项目，或者自身就会发布到 npm 平台。因此，让前端项目更方便的使用 npm 上的资源成为一大需求。

web 开发中常用到的静态资源主要有 JavaScript、CSS、图片等文件，webpack 中将静态资源文件称之为模块。 webpack 是一个 module bundler (模块打包工具)，其可以兼容多种 js 书写规范，且可以处理模块间的依赖关系，具有更强大的 js 模块化的功能。Webpack 对它们进行统一的管理以及打包发布，下面这张图来说明 Webpack 的作用：

Webpack的核心原理

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

1.一切皆模块

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

2.按需加载

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

webpack 官网文档

官网地址：https://webpack.js.org/

中文官网：https://doc.webpack-china.org/

webpack 的优势

对 CommonJS 、 AMD 、ES6 的语法做了兼容
对 js、css、图片等资源文件都支持打包
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6的支持
有独立的配置文件 webpack.config.js
可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
支持 SourceUrls 和 SourceMaps，易于调试
具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

webpack 安装和配置

安装
npm install -g webpack  //全局安装
npm install --save-dev webpack   //局部安装
执行
webpack —config webpack.config.js
配置

每个项目下都必须配置有一个 webpack.config.js通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。在导出的配置对象中有几个关键的参数：

entry

entry 参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件:

  entry: {
      index: "./page1／index.js",
      //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
      login: ["./entry1/login.js", "./entry2/register.js"]
  }
output

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

output: {
        path: path.resolve(__dirname, "build"), //打包输出路径，建议绝对路径

        // 配置文件在html中引用的根路径，改变静态资源引入的相对路径
        publicPath: "/assets/",
        //publicPath: "http://cdn.com/assets/",//可加上完整的url，效果与上面一致

        filename: "js/bundle.js",  // 单页应用只有一个入口文件时使用，引用入口模块
        filename: "js/[name].js",  // 传统多页应用有多个入口文件时使用，[name] 代入entry配置中的任意一项模块的名称，如：index
        filename: "js/[hash]/[chunkhash].js",  // 为生产环境实现前端静态资源增量更新时使用，[hash]是根据每次编译后项目总体文件的hash值, [chunkhash]是根据每个模块内容计算出的hash值

    }
module

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的:

module: {
 rules: [
   {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: ‘file-loader‘,
     query: {
       limit: 8192,
       name: ‘./images/[name].[ext]?[hash]‘
     },

   },
   // 使用多个插件，使用use，sass文件使用style-loader, css-loader, less-loader来处理
   {
       test: /\.(sass|scss)$/,
       use: [
           ‘style-loader‘,
           ‘css-loader‘,
           ‘sass-loader‘,
           extractTextPlugin.extract([‘style‘,‘css‘, ‘less‘])
       ],
   }
 ]
}

注意： webpack 2.x 之后 module.loaders改成了module.rules

resolve

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

resolve: {
       modules: [path.resolve(__dirname, "node_modules")]
       extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],

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

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

plugins: [
     //your plugins list
 ]

常用插件：

  • HotModuleReplacementPlugin --开启全局的模块热替换(HMR)
  • NamedModulesPlugin --当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
  • CommonsChunkPlugin --提取chunk公共部分
  • ExtractTextPlugin --独立生成css文件，以外链的形式加载
  • UglifyJsPlugin --压缩js
  • HtmlWebpackPlugin --使用模版生成html
externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

例如，从 CDN 引入 jQuery，而不是把它打包：

<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"></script>
externals: {
 "jquery": "jQuery"
}

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from ‘jquery‘;

$(‘.my-element‘).animate(...);

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

webpack-dev-server有两种模式支持自动刷新:

  • iframe模式
  • inline模式

iframe模式

页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载。

使用iframe模式无需额外的配置，只需在浏览器输入 http://localhost:8080/webpack-dev-server/index.html ，显然webpack-dev-server默认的模式就是iframe

inline模式

的webpack-dev-server客户端会作为入口文件打包，会在后端代码改变的时候刷新页面。配置方式有两种：CLI配置和通过Node.js Api手动配置

CLI 方式

此方式比较简单，只需在webpack.dev.server启动的命令中加入--inline即可

  • 修改package.json中scripts配置，添加--inline：
"scripts":{
"start":"webpack-dev-server --inline --config webpack.config.dev.js"
}
  • 重新运行npm start，浏览器访问 http://localhost:8080 即可，修改代码后保存，浏览器自动刷新

Node.js Api方式

  • 第一种方案：将webpack/hot/dev-server配置到所有webpack入口文件中
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);
  • 第二种方案：将webpack-dev-server客户端脚本插入到html中即可：
<script src="http://localhost:8080/webpack-dev-server.js"></script>

Hot Module Replacement

使用webpack-dev-server的自动刷新功能时，浏览器会整页刷新。而热替换的区别就在于，前端代码变动时，无需刷新整个页面，只把变化的部分替换掉。配置的关键在于将 webpack/hot/dev-server` 文件加入到webpack所有入口文件中。

ps: 使用前要注入 HMR插件

// 开启全局的模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),

// 当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
new webpack.NamedModulesPlugin()

使用HMR同样同样有两种方式：CLI和Node.js Api

CLI方式

命令行配置比较简单，只需在自动刷新的基础上，加上 --hot 配置即可。
此配置会自动将 webpack/hot/dev-server 添加到webpack所有入口点中。

"scripts":{
"start":"webpack-dev-server --inline --hot --config webpack.config.dev.js"
}

Node.js Api方式

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
  hot: true
  ...
});
server.listen(8080);

ps：要使HMR功能生效，就是要在应用热替换的模块或者根模块里面加入允许热替换的代码。否则，热替换不会生效，还是会重刷整个页面。下面是摘自webpack在github上docs的原话：

ps: 注意 webpack-dev-server 输出日志

//webpack-dev-server.js输出信息，可以发现
//contentBase存在，都会打印日志 Content not from webpack is served from
//webpack output is served from信息取自 output.publicPath 路径

function reportReadiness(uri, options) {
  const useColor = argv.color;
  let startSentence = `Project is running at ${colorInfo(useColor, uri)}`
  if(options.socket) {
    startSentence = `Listening to socket at ${colorInfo(useColor, options.socket)}`;
  }
  console.log((argv["progress"] ? "\n" : "") + startSentence);

  console.log(`webpack output is served from ${colorInfo(useColor, options.publicPath)}`);
  const contentBase = Array.isArray(options.contentBase) ? options.contentBase.join(", ") : options.contentBase;
  if(contentBase)
    console.log(`Content not from webpack is served from ${colorInfo(useColor, contentBase)}`);
  if(options.historyApiFallback)
    console.log(`404s will fallback to ${colorInfo(useColor, options.historyApiFallback.index || "/index.html")}`);
  if(options.open) {
    open(uri).catch(function() {
      console.log("Unable to open browser. If you are running in a headless environment, please do not use the open flag.");
    });
  }
}

WEBPACK DEV SERVER

Hot Module Replacement

Hot Module Replacement 介绍

Hot Module Replacement

如何写好.babelrc？Babel的presets和plugins配置解析

webpack2异步加载套路

基于webpack搭建前端工程解决方案探索

【翻译】Webpack——令人困惑的地方

时间： 2025-01-11 06:33:39

webpack简介与使用的相关文章

webpack 简介

1.webpack 可以做什么 webpack 可以看做是一个模块打包机, 它可以将你的项目结构中的一些浏览器不能直接运行的拓展语言(Typescript,scss等),将其打包并编译成浏览器可以运行的格式. 一切都为模块 就require.js,来说 , 它的模块化是将js模块化 , 而 webpack 将图片, 样式, js 都模块化处理 ,也就是说你可以像在require.js中引入模块一样 , 引入图片,样式模块,并且它还支持 AMD/CMD和CommonJs 规范,让不管你是喜欢像re

webpack简介

webpack是 前端资源模块化管理工具和打包工具: 原文参考:http://webpackdoc.com/usage.html 一.现有模块系统 1.CommonJS 特点: (1)node.js遵循CommonJs,npm中有近20万个可以使用的模块 (2)同步加载所依赖的模块资源,阻塞加载,不能并行加载模块 (3)当前浏览器暂不支持同步加载模块 使用方法: require('module'); require('../file.js); exports.doStuff = function

angular踩坑之路：初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

webpack 功能大全 【环境配置】

1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机是实现代码分包(Code Splitting )和通过模块化完成代码的无缝集成.webpack可以根据项目需求合并代码,并且支持按需加载. webpack入门,可以参看:petehunt的Webpack howto webpack的实现目标是: 拆分依赖树(dependency tree)为多个按需

Vue.js——webpack

Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能.官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-sim

webpack使用笔记

webpack简介 CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等适用于前端.npm已跻身主流JavaScript组件发布平台,越来越多的前端项目也依赖于npm上的项目,或者自身就会发布到npm平台.因此,让前端项目更方便的使用npm上的资源成为一大需求.除此之外,如果你的代码里面还有非模块化的部分,那么,webpack也可以兼容,并且是不二选择! 不仅仅如此,webpack还可

Vue.js——60分钟webpack项目模板快速入门

概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能.官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-simple模板创建一个简单的示例. 本文的Demo和源

四大维度解锁 Webpack 前端工程化

第1章 课程简介讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排.1-1 课程背景1-2 导学 第2章 学习准备讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备.2-1 学习准备 - 模块化(1)2-2 学习准备 - 模块化(2)2-3 学习准备 - 环境准备(mac)2-4 学习准备 - webpack 简介2-5 学习准备 - webpack 核心概念 第3章 由浅入深Webpack(1)由

Vue&amp;webpack入门实践

目录 1. 下载安装Vue 2. Vue 2.1 Vue要素 2.2 指令 2.3 组件化 2.4 vue-router 3. webpack 3.1 webpack简介 3.2 四个核心概念 3.3 安装 3.4 配置 3.5 执行打包并测试运行 3.6 打包CSS 3.7 快速执行打包命令 3.8 打包html 3.9 热更新 4. Vue-cli 4.1 安装 4.2 文件结构分析 1. 下载安装Vue 先安装好Node.js,因为接下来要使用其中的NPM安装Vue. 建议使用Vscode