webpack使用步骤（webpack怎么用）

webpack中如何加载静态文件的方法步骤

在*.vue组件里，所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。举个例子，在和背景background： url（./logo.png），”./logo.png”是一个相对路径，会被Webpack当做一个依赖加载。

首先，vue项目有两个地方可以存放静态资源。一个是assets文件夹，一个是static文件夹（地址栏输入static可以直接访问）。放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。而assets内的资源会被webpack打包，比如图片，会被转为BASE64。

如果没有build/utils.js，可以添加到其他文件中，只要后续步骤可以操作即可。命名模块名，与package.json相同 范围模块范围命名 Jsjs地址 Csscss地址 这里要特别注意scope，这是webpack配置的外部参数下的信息。

打包不仅仅是简单地插入文件，而是代码优化的重要步骤。chunk就像静态代码，而懒加载则遵循按需加载的原则。Webpack的核心在于chunk中的AST构建，配置文件包括webpack.config.js和package.json，后者可通过scripts功能简化命令执行。

本文将通过 webpack 来打包一个 js 文件，看看 webpack 是如何加载各个模块的。

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack中是什么意思?有什么用?如何用

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

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

webpack中cdn的使用是在静态资源打包生成的时候完成的。主要原理是使用html-webpack-plugin动态插入cdn链接。这里就不介绍webpack的使用了，以vue-clix生成的默认项目为例。Html-webpack-plugin是webpack的一个插件，可以动态创建和编辑Html内容。

Webpack 在前端开发中作为模块打包工具非常受开发者的青睐，丰富的 loader 使它可以实现各种各样的功能。本文将通过 webpack 来打包一个 js 文件，看看 webpack 是如何加载各个模块的。

js，webpack，gulp，还有饿了么开源的elementUI，因为使用了es2015，所以还需要引入babel将es6的js代码转换成es5。

webpack工作流程

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程 ：初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译。

Webpack 的构建流程可以分为以下几个步骤： 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。 开始编译：初始化 compiler 对象，注册所有的插件。 解析模块：从入口文件开始，找到所有依赖的模块，递归处理。 编译模块：使用 loader 对模块进行编译处理。

先将 webpack-webstorm-debugger-script 中的软件外包企业公司 置于 webpack.config.js 的同一目录下，搭建好你的脚手架后就可以直接 Debug 这个 webstorm-debugger.js 文件了。 webpack.config.js 配置 估计大家对 webpack.config.js 的配置也尝试过不少次了，这里就大致对这个配置文件进行个分析。

如何使用Webpack来加载模块

使用resolve.alias或resolve.modules选项。在webpack配置文件中配置resolve.alias选项，可以将模块映射到绝对路径或一个相对于当前工作目录的路径，这样就可以轻松地导入任何node_modules库。在webpack配置文件中配置resolve.modules选项，可以指定webpack在哪些目录查找依赖模块。

我们可以直接使用 require（XXX） 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

其实使用cdn就是在webpack热启动打包的时候动态插入脚本和样式链接。为了维护方便，我们在build/utils.js文件中增加了几个方法，以后可以在webpack.dev.conf.js和webpack.prod.conf.js上使用。如果没有build/utils.js，可以添加到其他文件中，只要后续步骤可以操作即可。

下载ECharts源码，如果不知道哪下载，百度一下ECharts，然后就能看到官网了。下载后，可以看到build文件夹，如果不是为了调测，可以直接使用dist文件夹下的。echarts.js和echarts-all.js区别在于后者已经把map.js打包进去了。

的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。