前端实践项目（二）webpack生成html和外部引用

　　该系列的总目录， https://www.cnblogs.com/shadoll/p/14637373.html

一.说明　　

　　上一篇文章介绍了怎么创建前端项目并用webpack进行打包。前端实践项目（一），创建项目，并使用webpack进行打包编译

　　本文会介绍如何构建一个前端项目（指基本的html、css、js，打包后可以直接部署看到结果），具体会运用到webpack来生成html文件和引用外部插件。

二.创建html

　　首先，在app文件夹中，创建一个index.ejs，这个是什么格式不重要，它只是最终打包出html的一个模板。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <title>testProject</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no" />
</head>

<body>
    <!--[if lt IE 8]>
        <p class="chromeframe">网站不支持ie7及版本低于ie7的浏览器，请换其它浏览器打开网站。</p>
    <![endif]-->
    <div id="test">test</div>
    <script type="text/javascript" src="./lib/jquery/dist/jquery.min.js"></script>
</body>

</html>

　　执行命令，安装插件。webpack打包html的插件。

cnpm install html-webpack-plugin@3.2.0 --save-dev

　修改webpack.config.js配置。意思是，根据模板去生成html文件，目标路径之前在output已经配置。

//引用插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//插件项
plugins: [
    new HtmlWebpackPlugin({
        template: __dirname + '/app/index.ejs',
        filename: 'index.html',
        inject: true,
        hash: true,
        chunks: ['index']
    })
],

三.引用外部插件

　　webpack进行打包，对应的入口文件及其引用的文件都会编译在一个js或css文件中，我们的html只需要引用这打包后的文件即可。

　　如果我们的html需要引用一些插件，而这些插件又不需要打包，比如Jquery，那该如何处理。

　　这种情况中，我们可以通过webpack来直接将其拷贝到打包文件中。

　　执行命令，安装插件。webpack用于拷贝文件的插件。

cnpm install copy-webpack-plugin@4.0.1 --save-dev

　　在app文件下的lib添加一个jquery.js。修改webpack.config.js配置，

//引用插件

const CopyWebpackPlugin = require("copy-webpack-plugin");

//插件项
plugins: [
    new CopyWebpackPlugin([{
        from: __dirname + '/app/lib',
        to: __dirname + '/dist/lib'
    }])
]

　　然后在html上直接引用该jquery.js。注意该地址引用是要根据打包后文件路径来判断的。

<script type="text/javascript" src="./lib/jquery/dist/jquery.min.js"></script>

　　修改webpack.config.js配置。由于该jquery是外部引用，在webpack中是找不到该jquery对象，使用时会出现编译错误，所以可以通过配置来将外部对象设置为可以内部使用的引用。

externals: {
    'jquery': 'jQuery'
},

四.准备运行　　

　　在index.js上使用jquery方法。

const $ = require('jquery');

var type = 1;

$("#test").click(function () {
    if (type == 1) {
        $("#test").html("233");
        type = 2;
    }
    else if (type == 2) {
        $("#test").html("test");
        type = 1;
    }
});

　　执行命令webpack进行编译。在生成的dist文件夹中，看到js、css打包到一个文件上。外部引用也拷贝过去。根目录下也生成一个index.html，生成html过程中，会自动加入编译后的js、css引用，路径是根据webpack.config.js的output配置来决定。publicPath为“/”，指部署环境下的根目录。可以改为“./”，为该html文件的相对路径。

//入口文件输出配置
output: {
    path: __dirname + '/dist',
    filename: 'js/[name].js',
    publicPath: '/'
},

//生成后html自动插入的引用
<script type="text/javascript" src="/js/index.js?dab3f463afae1ec2e337"></script></body>

　　部署该项目或直接打开html，点击文字就可以看到该点击事件生效了。