webpack前端工具

配置webpack
第一步: 配置 npm install -g webpack
第二步: 设置全局（在你的项目目录里面按住shift+鼠标右键打开命令窗口） npm --save-dev webpack

第三步：建立文件夹app 里面放main.js work.js文件
建立文件夹public 里面放index.html文件
第四步：在main.js里面引入require('./work.js'); //入口文件
work.js里面就是你要写的项目文件
第五步：在index.html里面引入webpack文件 (<script type="text/javascript" src="./webpack.js "></script>)
第六步:在当前项目文件夹里面打开命令窗口输入

webpack app/main.js  public/webpack.js

public/webpack.js就是生成的压缩文件
webpack 是个命令 app/main.js意思是到这个文件夹里面 public/webpack.js就是把main.js的文件通过webpack生成到public文件夹下面的webpack.js里面
简便的编译
在项目文件夹下面新建一个webpack.config.js文件（一定是这个名字）,
在里面输入你要生成的文件

module.exports ={
    //入口文件的文件（文件是app文件夹里面的main.js）
    entry:__dirname+"/app/main.js",
    output:{
        // 打包后放置的位置(在public文件夹里面生成webpack打包文件)
        path:__dirname+"/public",
        // 打包后我们的文件
        filename:'webpack.js'
    }
}

生成包
在此文件窗口输入webpack就可以生成

用法
在index.html文件里面引入

    <script type="text/javascript" src="./webpack.js "></script>

第二中配置全局
在package.json里面

"start":"webpack",

标准建立打包流程

1：新建webpack.config.js
2: 在package.json的script里面
 "scripts": {
    "start":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  可以输入npm start就可以生成

var webpack = require("webpack");
//var Html = require("html-webpack-plugin");
module.exports ={
    //入口文件的文件
    entry:__dirname+"/app/main.js",
    output:{
        // 打包后放置的位置
        path:__dirname+"/public",
        // 打包后我们的文件
        filename:'webpack.js'
    },
    //配置json css
    module:{
        loaders:[
            {
                test:'/\.json$/',
                loader:'json-loader'
            },
            {
                test:'/\.css$/',
                loader:'style!css!postcss'
            },
            {
                test:'/\.js$/',
                loader:'babel-loader',
                exclude:/node_modules/,//屏蔽这里面的js文件
                query:{
                    presets:["es2015"]
                }
            }

        ]
    },
    plugins:[
            new webpack.BannerPlugin("诸葛苍穹"),
            // new Html({
            //  template:__dirname + '/app/index.html'
            // })
    ],
    //postcss:[autoprefixer({browsers:['last 2 versions']})]
    devServer:{
        contentBase:'./public',//所加载的页面所在的目录
        colors:true,
        inline:true, //实时刷新
        hot:true


    }

}