【webpack】webpack配置

我自己能看懂。

1.    安装npm
2.    Npm install –g webpack
3.    创建项目
4.    Npm init
5.    创建webpack.config.js，并配置
6.    安装项目webpack:npm install webpack –save-dev
7.    安装插件等：npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
8.    编译:webpack

文档传送门：https://doc.webpack-china.org/configuration/#-

webpack.config.js内如如下：

var path = require("path");
var webpack =require("webpack");
var fs=require("fs");
var glob=require("glob");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

//取文件后缀名
function GetFileExt(filepath) {
    if (filepath) {
        if(filepath.indexOf("/")>0){
           return filepath.substring(filepath.lastIndexOf("/")+1);
        }else{
           return filepath;
        }
    }
}
//取文件名不带后缀
function GetFileNameNoExt(filepath) {
    var fp= GetFileExt(filepath);
    return fp.substring(0,fp.lastIndexOf("."));
}

//获取一个初始化的webpack设置
function GetSetting(){
    return {
        entry: { 
        },//入口
        output: {//出口
            path: __dirname + "/build/",
            filename: "[name].js",
            library: "tools",
            libraryTarget: "umd"
        },
        module: {
            rules: [
                {
                     test: /\.jsx?$/, 
                     loader: "babel-loader",
                     options: {
                        presets: ["react","es2015"]
                        //npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
                     }
                },
                {
                    test:/\.ts$/,
                    loader:"ts-loader"
                }
            ]
        },
        externals:{
            // React:"react",
            // ReactDOM:"react-dom"
            blogcommon:"./build/common.min.js"
        },
        plugins:[
                // new webpack.optimize.UglifyJsPlugin({
                //     compress: {
                //         warnings: false,
                //         drop_console: false,
                //       }
                // })
                //把入口文件里面的数组打包成vendors.js
                //new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
            ]
    };
};
function setEntry(_path,_setting){
    var files= glob.sync(_path);
    files.forEach(function(file){
        _setting.entry[GetFileNameNoExt(file)]=file;
    });
}

var setting=[];

var blogsetting=GetSetting();
blogsetting.output.filename="views/blog/[name].js";
setEntry("./content/src/blog/*.js",blogsetting);
setting.push(blogsetting);

var comsetting= GetSetting();
setEntry("./content/src/zsphelper.js",comsetting);
comsetting.output.filename="[name].js";
//setting.push(comsetting);

var comsetting=GetSetting();
//comsetting.entry.common= ["react","react-dom"];
setEntry("./content/src/common.js",comsetting);
//comsetting.output.chunkFilename="[name].js";
comsetting.output.filename="[name].min.js";
//setting.push(comsetting)

module.exports=setting;