目的：平时小项目中例如一些网站需要进行打包压缩，用这个工具可以进行打包压缩，就可以上传到服务器。
使用方法：
1，引进需要打包的项目，把入口html替换掉项目中的index.html，把引进的js，css都放在src里面对应的文件夹里面
2，npm install
3，进行webpack.config.js文件的修改
var path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
//入口文件
entry: {
index : './src/js/common.js'
},
//出口文件
output: {
path: path.resolve(__dirname,"dist"), //编译后的文件路径
filename: 'js/app.js',
},
module: {
//Loaders
rules: [
//.css 文件使用 style-loader 和 css-loader 来处理
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options:{
limit:5000,
name:'image/[name].[hash:8].[ext]'
},
},
{
test: /\.html$/,
use:[
{
loader:'html-withimg-loader'
},
{
loader:'html-loader',
query:'require'
}
]
}
],
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
inject:"head"
})
]
};
module.exports = config;
4，在入口文件引进（require）所需要打包的文件，如
'use strict';
require('../css/style.css');
5，删除html的js和css引入路径，因为打包完成后的js会自动注入打包过的html，执行npm run start，进行打包。
6，把dist文件上传到服务器。
注意的问题：
因为webpack是按模块来打包的，也就是说经过打包的文件代码是被打包到一个函数里，此时你所有定义的变量或者方法已变成局部的。所以如果打包后需要引用该函数的话，记得把函数定义在全局，用window.fun = function(){}或者把函数写在module.exports={}里面。
工具现状：
可以打包js文件、css文件、image、html，后续会继续完善该工具。
git地址：