webpack打包工具

目的：平时小项目中例如一些网站需要进行打包压缩，用这个工具可以进行打包压缩，就可以上传到服务器。

使用方法：

　　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地址：

　　https://gitee.com/wxwphp/webpackTool.git