⑴ webpack基本使用
step1: 创建一个项目录
注意：项目名一般 不要带中文
step2: 创建 package.json
或者：
step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:
总结：webpack可以做两件事情况：
step5: 配置入口文件和出口文件
每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。
webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack
在 package.json 文件中配置命令：
在终端中执行命令：
注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。
改变文件引用路径：
执行上述命令后终端会有类似信息输出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上
【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问
【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件，则是以src为根目录访问。
该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_moles平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。
因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:
step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）
在 package.json 中配置命令，并重启服务器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。
安装 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的两个作用：
step9: 处理样式文件
html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。
处理css文件：
处理less样式文件
⑵ webpack 怎么直接实时编译输出文件
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。react安装当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。#npminstallreactreact-dom–savereact安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。react解析器babel安装babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安装#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安装一般情况下我们选择本地安装，这样便于管理。打包工具webpack的安装同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。#npminstallwebpack–save-dev//本地安装#npminstallwebpack–g//全局安装如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。这里我们选择全局安装。这样才能出现我们将要说的问题。webpack配置文件编写安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。代码一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}编译过程中出现的错误好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。接下来我们就要编译打包我们的项目。#webpack执行该命令以后，你会发现出现如下的错误：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……这也就是说找不到babel-preset-react。好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。解决问题的方式出现上述问题以后，我们有这样三种方式可以解决。方式一要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。query:{presets:['react']}好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安装的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安装没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。方式二此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//将webpack安装到本地位置——也就是项目目录下的node_moles中#ln–s/项目根目录/node_moles/webpack/bin/webpack.js/usr/bin/webpack//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）//这样我们就可以在任意位置直接使用webpack命令了。此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。方式三该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。代码二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}
⑶ webpack工作流程
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程 :
1.初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。
2.开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。
3.确定入口：根据配置中的 entry 找出所有的入口文件。
4.编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
5.完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
6.输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
7.输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
⑷ webpack的基础，看懂webpack如何编译bundle everything
这篇文章简单概述webpack构建编译各种资源的通天本领，帮大家简单理解webpack如何强大到编译各种资源（es6/es7、jsx、vue、less、scss、image...）。
webpack天生支持有且只支持以下模块打包编译
糟糕，我们发现它只能读懂 .js、.json文件 。没有看到它支持 jsx、TypeScript 或者我们经常写的 sass、less样式 等的编译处理啊！比如less样式写法并不是原生css支持的，所以他怎么处理非原生模块的语法并进行模块化？
没错，就是用这些装载器把这些非原生样式语法写法转成单纯原生的css规则： index.less => index.css ，现在通过这些loader的编译转换，浏览器可以读懂了。
那么还有哪些常用的loader？
以babel-loader为例，为什么需要它。
例如我们开发中常写的 es6、es7、n... ，所以需要 babel 来编译进行转换为ES5兼容的语法。
对于语法转换，往更深层次的奥义，就是涉及babel原理， AST语法树 ，一般loader都会经过3个步骤：
篇幅概念性太强，请看总结。
参考：
⑸ 丁鹿学堂：webpack下使用ts开发编译
webpack结合ts使用
1.初始化webpack， npm init -y 生成package.json 文件
自己加一个打包命令 "build": "webpack"
2.安装开发依赖 npm i -D webpack webpack-cli typescript ts-loader
3.自己创建配置文件webpack.config.js
4.创建tsconfig配置文件，这个相关配置在上个文章中已经介绍过了，我们只简单选择三项，开启严格模式。
5.都配置好以后，再编译ts 就可以直接使用 npm run bulid 去编译了。
以上就是最简单的webpack打造的ts开发编译环境。
⑹ webpack的打包配置-1修改版
1、现在本地创建项目目录
2、然后在index.html中写入html的结构
3、想要先安装jquery，先npm init -y一下， npm install jquery -S 【项目目录安装，必须是小写的jquery，否则会报错】，在index.html引入main.js
4、在main.js中写入内容如下：
使用webpack处理一下，转换成浏览器可以识别的文件 ：
a: 先全局安装一下webpack=> npm install [email protected] -g
b: 在终端中执行： webpack ./src/main.js【要处理的文件的目录】 ./dist/bundle.js【要输出的文件的目录以及文件名】 ，会在dist中生成一个bundle.js文件，然后在 index.html中引入的main.js文件改成 bundle.js
这样的话每次打包时候都需要执行 webpack ./src/main.js ./dist/bundle.js
c: 为了不手动指定入口和出口文件，在项目根目录中新建一个webpack.config.js（基于node的，所以** **node.js的命令都可以识别）
这样的话，就可以在终端中直接执行命令：webpack就可以直接打包了，但是还有个小问题。就是它不 会自动更新，需要手动刷新一下。下面我们就来解决这个问题。来配置webpack-dev-server
4、使用webpack-dev-server实现自动打包编译
直接安装webpack最高版本的时候，可能会遇到报错的情况，如果对于版本没有要求的话，可以降低版本：
npm install [email protected] -D 如果还会有报错出现的话，可以试试使用cnpm安装
需要先在终端中安装webpack-dev-server：具体操作如下：
4.1 npm/cnpm install webpack-dev-server -D 出现下面的提示：【其实此步骤容易出现报错，所以呢，把webpack-dev-server版本修改为@2.9.1=>[email protected]时，就不会报错】
4.2 npm/cnpm install webpack -D 【此步骤也是容易出错的，所以安装的时候要和上边的版本保持一致，[email protected]版本】
4.3 需要在package.json中配置dev
最后直接执行：npm run dev运行成功，但是需要注意的是此时打包成的bundle.js文件不是磁盘中存在bundle.js文件，而是一个与src dist node_mole同级的看不见的文件，在index.html引入的路径也要修改以下=》<script src="/bunlde.js"></script>
此时，正常打包，但是不自动打开浏览器
发布出来，方便自己查看，有什么不对的地方，希望留言纠正修改。（程序员菜鸟一枚）
⑺ webpack+vue怎么编译全部改动的文件
p@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles
Hash: d902d9dc5e1698eaa9ea
Version: webpack 1.12.14
Time: 6584ms
Asset Size Chunks Chunk Names
build.js 80.7 kB 0 [emitted] main
build.js.map 690 kB 0 [emitted] main 12345678910111234567891011
通过引入组件的方式
⑻ webpack打包vue项目，可修改配置文件
vue项目打包完成后，如需改变配置文件中的信息，比如域名修改（如下图config.js），是不可能在配置文件中直接更改的，因为配置文件是前端写死的，这时只能手动更改项目中的配置，然后重新打包npm run build
var packConfig = require('../src/config')//引入原配置文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件
var createServerConfig = function(compilation){//声明转换函数，将对象转为json字符串
return JSON.stringify(packConfig)
}
plugins里添加
new GenerateAssetPlugin({//生成文件，并添加入内容
filename: 'config.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
import axios from 'axios'//引入一个ajax封装工具
import storage from 'services/storage'//引入对缓存操作的封装工具
var getConfigJson = function () {
//声明一个函数，用来读取json文件并将其内容存入缓存
axios.get('config.json').then((result) => {
//读取文件
storage.setItem('config', result.data)
}).catch((error) => {
console.log(error)
})
}