目录
该系列的总目录， 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配置，
//引用插件
//插件项 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，点击文字就可以看到该点击事件生效了。