http://jspang.com/2017/09/16/webpack3-2/

一.安装webpack4.x

        首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，(这里不推荐全局安装,全局安装会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败)。

创建一个工程目录:比如webpack-test然后进入webpack-test中

1.npm init //此时文件目录下生成一个package.json用于保存项目的信息

2.npm install webpack --save-dev//此时生成一个node_modules文件

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli复制代码

(webpack@version是安装指定webpack版本也可以在package.json的devDependencies中更改webpack版本号,然后npm install安装指定版本)

3.在webpack-test目录下新建一个src/index.js文件,用于webpack的入口,然后运行webpack --mode --development 或者 webpack --mode --production  这时就会生成dist/main.js文件,为了方便操作,我们可以在package.json的script中写入

"dev":"webpack --mode development",

"build":"webpack --mode production"

以后我们只需要在命令行执行 npm run dev

相当于执行webpack --mode development，执行npm run dev相当于执行webpack --mode production,

4.使用一个配置文件:(webpack.config.js)

在 webpack 4中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个配置文件

二.管理资源

1.加载css文件:

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader (对路径进行处理)和 css-loader(对css进行处理)

在命令行安装

npm install --save-dev style-loader css-loader复制代码

在js文件中引用,

在webpack.config.js中引入css配置然后启动服务即可

2.加载less文件

  在开发中less的使用不可获缺,那么该如何配置less文件呢,首先需要安装less和less-loader

cnpm install less less-loader --save-dev,然后在引入less文件,就可以了,那么如何把less从js中分离出来呢?在webpack.config.js的module模块中配置

3.加载sass文件(注意sass文件以.scss结尾)

  sass的加载和less几乎一模一样就是在安装sass时需要 cnpm install node-sass sass-loader --save-dev,然后引入sass文件!sass分离出来和less一样把test:/\.scss$/即可

4.加载图片文件

加载图片是需要安装 cnpm install file-loader url-loader --save-dev, file-loader是是打包图片到webpack照片中,url-loader是配置limit的,当图片比这个值大的时候就在显示dist里,比这个值小就转成base64写到js代码里,url-loader自带了file-loader功能,且不依赖file-loader所以这里只写了url-loader

但是,当图片大于limit值得时候,图片生成在dist目录下,没有加载到js文件中,所以这是图片的路径又会出错,这时候就需要使用绝对路径来处理图片(publicPath)

如果我们在html页面中写入<img src="xxx.jpg">时,webpack不会打包html中的img标签,这个时候需要使用html-withimg-loader插件来解决这个问题.

首先cnpm install html-withimg-loader --save-dev ,然后

有的时候我们需要css和js分离,虽然webpack并不希望我们这么做,我们可以使用extract-text-webpack-plugin插件来实现css和js分离

首先 cnpm install extract-text-webpack-plugin --save-dev, 然后在webpack.config.js中引入const ExtractWebpackPlugin = require('extract-text-webpack-plugin');//把css文件从js中分离出来(webpack4.0后这个插件的版本也要对应上),在module的rules中

在plugins中

cnpm install --save-dev postcss-loader autoprefixer

5.消除未使用的css(purifycss-webpack插件)

安装插件:cnpm i -D purifycss-webpack purify-css(等同于cnpm install -save-dev purifycss-webpack purify-css),然后引入插件和全局的glob,在plugins中指定消除页面的路径

6.给webpack增加babel支持

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：

• 使用下一代的javaScript代码(ES6,ES7….)，即使这些标准目前并未被当前的浏览器完全支持。
• 使用基于JavaScript进行了扩展的语言，比如React的JSX

babel的安装与配置:

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

安装:

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

配置:.babelrc

虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果写在webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置写在.babelrc文件里。在项目根目录新建.babelrc文件，并把配置写到文件里

ENV:

现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法.

安装:cnpm install --save-dev babel-preset-env

.babelrc中的内容改为{"presets":["react","env"}

总结：对于在React中Babel的使用，如何解析JSX，我会在后边的课程作详细了解，大家不要着急。在实际工作中还是要安装Babel的，这样能更好的兼容每种浏览器，而把Babel的配置文件分解出来是最好的选择。

7.打包后如何调试

在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。

四种选项

在配置devtool时，webpack给我们提供了四种选项。

• source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
• cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
• eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
• cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。

8.实战技巧:开发和生产并行设置

依赖不同

一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的。

• 开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。
• 生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包在dependencies中。

在windows下的配置

首先在webpack.config.js中

其次在package.json中设置

最后在cmd中npm run dev或者npm run build就可以看到在开发或者生产环境中运行了.

9.实战技巧:webpack模块化配置

现在的前端开发随着ES6的普及已经大面积使用模块化进行开发了，在webpack.config.js配置文件中也要使用到模块化配置,这里只举了一个简单的例子,把entry入口进行模块化配置.

首先在根目录下新建一个webpack_config文件夹,在该文件夹下把entry_webpack.js写入

然后在webpack.config.js中导入该模块,(注意在webpack.config.js中只能用require来导入,用import会报错,)

//引入模块化后的entry模块

const entry=require('./webpack_config/entry_webpack.js');

最后你可以再次使用npm run dev 进行测试，你会发现模块化成功了。

总结：模块化在实际工作中是必不可少的操作，但是现在的webpack教程还很少讲到，大家一定要重视这节，因为如果你搞不清这节的内容，可能你看别人的配置也会看不明白。记得一定要动手练习操作，否则你下面的课程也没办法学习。

10.实战技巧:优雅打包第三方类库(jquery,vue,react等)

我们以引入jquery为例:

安装JQuery: cnpm install --save jquery(因为是在生产环境中,所以用save,在开发环境用--save-dev)

第一种方法:在js文件中引用: 

第二种方法:用plugin引入

如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负责了一下打包，这样并没有全局感。那再学习一种在webapck.config.js中配置的方法，这种不需要你在入口文件中引入，而是webpack给你作了全局引入。这个插件就是ProvidePlugin。

ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。

const webpack = require('webpack');

然后在plugins中引入:

配置好后，就可以在你的入口文件中使用了，而不用再次引入了。这是一种全局的引入，在实际工作中也可以很好的规范项目所使用的第三方库。

总结：每一个项目都可能引入第三方类库，而像Vue和Angular这样的成熟框架都推出了自己的webpack框架，比如vue-cli。但是很多情况还是需要我们手动更改这些配置好的webpack来适用于我们的公司项目，所以这节课的知识也是在工作中经常使用的，希望小伙伴们一定要重视并进行练习。

11.实战技巧:watch的正确使用方法

在初级开发阶段，使用webpack-dev-server就可以充当服务器和完成打包任务，但时随着你项目的进一步完成，可能需要前后台联调或者两个前端合并代码时，就需要一个公共的服务器了。这时候我们每次保存后手动打包显然效率太低，我们希望的场景是代码发生变化后，只要保存，webpack自动为我们进行打包。这个工具就是watch，这节课我们把wacht完全学会，你会发现在开发中更加的得心应手。

watch的配置

很多小伙伴认为–warch直接使用就可以，并没有什么需要讲的。其实这只是初级的用法，但是在学习一种技术时，我们必须要做到了解全部，也就是常说的知其然知其所以然。我们看下面的配置代码，我在代码中已经做出了解释。

上边的每一行配置我都作了说明，有时候你在没配置的情况下，直接用webpack –watch是不起作用的，这时候你需要进行配置这些选项。

配置好后，我们就可以痛快的使用watch了，在大型项目中，这大大加快了我们的开发效率，不用反复的手动打包了。

BannerPlugin插件

由于这节课的内容太少了，我们再讲一个工作中的小技巧，再工作中每个人写的代码都要写上备注，为的就是在发生问题时可以找到当时写代码的人。有时候也用于版权声明。

这个插件就是BannerPlugin，我们使用后会在JS中加上我们的版权或开发者声明。

这时在dist目录下的js已经加上了版权声明。

12.实战技巧:webpack优化黑技能(抽离第三方类库(jquery,vue等))

作为一个程序员，无论是写什么程序都i要有一颗不断优化的心。webpack在优化这条路上，也为我们作了很多配置，这节课我们就看看工作中常用的webpack优化黑技能。

ProvidePlugin和import

在第19节中学习了如何引入第三方类库，并引入了jquery，在引用JQuery时我们用了两种方法，第一种时import，第二种时使用ProvidePlugin插件。那两种引入方法有什么区别那?

• import引入方法：引用后不管你在代码中使用不适用该类库，都会把该类库打包起来，这样有时就会让代码产生冗余。
• ProvidePlugin引入方法：引用后只有在类库使用时，才按需进行打包，所以建议在工作使用插件的方式进行引入。

具体的对比操作，会在视频中演示，你会看出两种引入方法的对比打包结果。差距还是蛮大的。

抽离JQuery

上边的方法只是优化的第一步，工作中你会发现，不适用的类库几乎我们也不会引入，所以上边只是一个必要操作的第一步。那往往把第三方类库抽离出来，才是最好的解决方法。

第一步：修改入口文件

抽离的第一步是修改入口文件，把我们的JQuery也加入到入口文件中，看下面的代码。

webpack.config.js

多个第三方类库抽离

会了如何抽离Jquery，但是在实际开发中，我们会引用不止一个第三方类库，这时也需要抽离。我们拿引入Vue为例，看看如何抽离出来。

第一步:我们先用npm 进行安装。

注意这里是–save，而不是–save-dev。因为这个类库在生产环境中也是要使用的。

第二步：在入口配置中引入vue和jquery

只是多比上边多加了一个vue选项。

第三步：修改CommonsChunkPlugin配置

需要修改两个位置：

• 第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组；
• 第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。

下面是我们修改的代码，你可以跟jquery抽离时对比一下。

配置好后，我们就可以在控制台输入webpack进行打包了。你会看到我们预想的结果，jquery和vue都被我们抽离出来了。

总结：在项目开发中，我们很使用很多第三方类库，那好的做法就是把第三方这些类库全部抽离处理，这样在项目维护和性能上都是不错的选择。希望学会这个技巧后，你也能在工作中使用上。

但是在webpack4.x中webpack.optimize.CommonsChunkPlugin已经被删除了,取而代之的是optimization.splitChunks(具体用法参考webpack官方文档)

13.实战技巧:静态资源集中输出

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源，直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。

使用copy-webpack-plugin

copy-webpack-plugin就是专门为我们作静态资源转移的插件，不过它不同上两节使用的插件，它是需要安装的。

插件安装

插件的安装只要使用npm就可以了。

如果在安装过程中出错，你可以使用npm来进行安装。

引入插件

安装好后，需要在webpack.config.js文件的头部引入这个插件才可以使用。

配置插件

引入之后我们就可以在plugins里边进行配置插件了，我们先看下面的插件配置代码，然后再进行详细讲解。

• from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。
• to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。

配置好后，我们就可以使用webpack 进行打包了，你会发现图片按照我们的配置打包了过去。

总结：你是不是觉的学习起来越来越容易了，因为你经过20多节课的学习，已经基本掌握了webpack的知识，剩下的就是不断练习和在实际项目中发现新的需求，然后找到新的loader或者pulgin来解决你的问题。

14.实战技巧:json配置文件的引用

在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的，但是在webpack3.x版本中，你不再需要另外引入了。

读出Json内容

第一步：现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。

第二步：到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，如下：

这两行代码非常简单，第一行是引入我们的json文件，第二行驶写入到到DOM中。

第三部：启用我们的npm run server 命令就可以在浏览器中看到结果了。

说说热更新

其实在webpack3中启用热加载相当的容易，只要加入HotModuleReplacementPlugin这个插件就可以了。

现在只要你启动 npm run server 后，修改index.html中的内容，浏览器可以自动给我们更新出最新的页面。

但这里说的热加更新和我们平时写程序的热加载不是一回事，比如说我们Vue或者React中的热更新，并不是刷新整个页面，而是一个局部更新，而这里的更新是重新刷新了页面。

这点小伙伴们要搞清楚。

总结：这节主要回答了两个同学的问题，这两个问题在实际开发中也经常用到，所以我就总结成课，给小伙伴们讲解一下，希望对你们有所帮助。