webpack flutter typescript
回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:
index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;
我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件
index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;
我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件
webpack的插件
webpack的功能强大有一部分的原因就是插件的功能多且强。
然而我们在使用插件前需要明白一点，我们使用的目的是为了解决问题，而不是为了使用而使用。现在我们项目的问题是什么？首先没有html，这个简单，直接新建一个html即可，不需要插件。
但是如果这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会形成缓存，导致明明发布了也没有效果啊。解决这个问题的办法是在js后面加版本号，比如bundle.v1_1_0.js，我们可以手工操作进行修改，但是总有忘记的时候，这样就会出错。那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。接下来让我们来开始使用这个插件。首先webpack内部没有集成这个插件，需要我们去安装：
npm i html-webpack-plugin --save-dev
然后删掉index.html，并修改webpack.config.js为：
var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, plugins: [new HtmlWebpackPlugin()]};
此时运行
webpack
可以发现在我们的输出目录build下还生成了一个index.html,里面还自动引入了我们生成的的bundle.js。
webpack的功能强大有一部分的原因就是插件的功能多且强。
然而我们在使用插件前需要明白一点，我们使用的目的是为了解决问题，而不是为了使用而使用。现在我们项目的问题是什么？首先没有html，这个简单，直接新建一个html即可，不需要插件。
但是如果这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会形成缓存，导致明明发布了也没有效果啊。解决这个问题的办法是在js后面加版本号，比如bundle.v1_1_0.js，我们可以手工操作进行修改，但是总有忘记的时候，这样就会出错。那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。接下来让我们来开始使用这个插件。首先webpack内部没有集成这个插件，需要我们去安装：
npm i html-webpack-plugin --save-dev
然后删掉index.html，并修改webpack.config.js为：
var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, plugins: [new HtmlWebpackPlugin()]};
此时运行
webpack
可以发现在我们的输出目录build下还生成了一个index.html,里面还自动引入了我们生成的的bundle.js。
可是这样并没有解决我们的问题，那么让我们来使用html-webpack-plugin的更多功能，修改webpack.config.js文件为：