4. 首页js移植及ProvidePlugin注入全局变量在移植jquery过程中，发现全局没有$变量，通过webpac

接下来就到了最关键的步骤，引用js模块，现在每个js都是一个单独的资源库，所以我们需要把他们集成在一起。首先我们在入口文件index.js中逐一去引用这些文件:

import './css/public.css'
import './css/index.css'

import './js/jquery-1.12.4.min'
import './js/public'
import './js/nav'
import './js/jquery.flexslider-min'

注意: 这些文件没有用模块化导出，即没有 export 内容的，是可以直接去引用的，引用之后就执行，这些文件里面的东西都是直接挂载到window上，或者直接操作DOM的。

执行npm run build打包成功，运行时发现页面报错:

Uncaught ReferenceError: $ is not defined

这是因为 jquery 在程序中使用是通过$符号使用的，但是我们在全局没有定义这个$符号，要解决这个问题，需要使用webpack的内置插件ProvidePlugin，它的主要作用是将某个库和一个全局的代号做映射。可以参考我写的这篇文章如何使用webpack插件ProvidePlugin。

首先需要通过npm install 来安装 jquery 和 flexslider

npm install jquery flexslider -S

然后把在src/index.html底部的代码移动到src/js/nav.js，并引入flexslider库:

// 引入通过 npm 安装的 flexslider
import 'flexslider'

// 导航固定顶部
$(function () {
  $(window).scroll(function () {
   ...
  })
})
$(function () {
  $('#home_slider').flexslider({
    animation: 'slide',
    ...
    useCSS: false
  })
})

同时修改index.js入口文件，替换掉我们通过npm install 安装的jquery

import './css/public.css'
import './css/index.css'

import 'jquery'
import './js/public'
import './js/nav'

配置webpack.config.js

const webpack = require('webpack')
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        })
   ]
}

webpack自身的很多核心功能也是通过plugin是吸纳的，它里面内置了很多使用的plugin，可以直接使用。

执行npm run build打包，这个时候就发现$的问题解决了。但是，发现图片加载不了，这是因为图片的路径不对，index.html里面img的路径是./img/logo.png，但是dist文件下是没有img目录的，img是在src文件夹下，所以我们需要把所有的路径改为../src/img/即可。

登录页面移植

首先把login.html烤包到src/目录下，然后把login.html里面所有的link和script引入的资源都删除，即

<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>

修改login.html 中 img标签的图片路径，把img/改为../src/img/。
在入口文件index.js中，加入import './css/login.css'
修改webpack.config.js配置，加入

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: './src/index.html'
}),
new HtmlWebpackPlugin({
  filename: 'login.html',
  template: './src/login.html'
})

执行npm run build命令重新打包，可以发现在dist目录下生成了index.html和login.html，同时引用了bundle.js。