NPM_Webpack.Txt

1、命令打包JS文件
    webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}
    webpack app/start/main.js dist/start/bundle.js

2、webpack.config.js的文件打包,放根目录下,__dirname是node的当前目录
    module.exports = {
    entry:  __dirname + "/app/start/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist/start",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
    }

    //个性化配置js的打包名称
    var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
    module.exports = {
        entry: {
            p1: "./page1",
            p2: "./page2",
            p3: "./page3",
            ap1: "./admin/page1",
            ap2: "./admin/page2"
        },
        output: {
            filename: "[name].js"
        },
        plugins: [
            new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
            new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
        ]
    };
    // page1.html: commons.js, p1.js
    // page2.html: commons.js, p2.js
    // page3.html: p3.js
    // admin-page1.html: commons.js, admin-commons.js, ap1.js
    // admin-page2.html: commons.js, admin-commons.js, ap2.js

    {
        entry: {
            page1: "./page1",
            //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
            page2: ["./entry1", "./entry2"]
        },
        output: {
            path: "dist/js/page",
            filename: "[name].bundle.js"
        }
    }
    //最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下

    //指定公共文件生成到指定目录
    plugins: [
    new webpack.optimize.CommonsChunkPlugin("file2","./anotherpath/file2.bundle.js")
    ]

    //特定目录打包生成特定目录下的代码
    module.exports = {
        entry: {
            "start/":__dirname +"/app/start/main.js",//已多次提及的唯一入口文件
            "angular/":__dirname+"/app/angular/main.js"

        },
        output: {
            path: __dirname + "/dist",//打包后的文件存放的地方
            filename: "[name]bundle.js"//打包后输出文件的文件名
        }
    }

3、配置package.json来运行npm start来配合webpack.config.js打包：
    "scripts": {
    "start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令
    }

4、常用Webpack命令：
    webpack --config XXX.js     //使用另一份配置文件（比如webpack.config2.js）来打包
    webpack --watch             //监听变动并自动打包
    webpack -p                  //压缩混淆脚本，这个非常非常重要！
    webpack -d                  //生成map映射文件，告知哪些模块被最终打包到哪里了

5、webpack.config.js文件的常用配置：
    a、配置source maps，需要配置devtool，有{source-map,cheap-module-source-map
        ,cheap-module-source-map,cheap-module-eval-source-map}四个选项
        cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑da时间成本是使用
    module.exports = {
        devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
        entry:  __dirname + "/app/start/main.js",
        output: {
        path: __dirname + "/dist/start",
        filename: "bundle.js"
        }
    }

    b、本地开发服务器配置：npm install --save-dev webpack-dev-server
    module.exports = {
        devtool: 'eval-source-map',
        entry:  __dirname + "/app/start/main.js",
        output: {
        path: __dirname + "/dist/start",
        filename: "bundle.js"
        },

        devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
        } 
    }

    c、css-loader 和 style-loader使用：npm install --save-dev style-loader css-loader
    module.exports = {
        devtool: 'eval-source-map',
        entry:  __dirname + "/app/main.js",
        output: {
        path: __dirname + "/build",
        filename: "bundle.js"
        },
        module: {
            loaders: [
                {
                test: /\.json$/,
                loader: "json"
                },
                {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel'
                },
                {
                test: /\.css$/,
                loader: 'style!css'//添加对样式表的处理
                }
            ]
        }
    }