webpack项目实战

先给个链接http://www.cnblogs.com/zhengrunlin/p/7070479.html
别人家的，写的很好
1.安装webpack

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

2.构建项目目录

由于是公司项目，在此只能上传个目录，最主要的webpack.config.js 源码在下方已粘贴并注释。
3.编辑webpack.config.js

首先您需要安装以下几个插件

npm install html-webpack-plugin --save-dev
npm install extract-text-webpack-plugin --save-dev    //提取css
npm install clean-webpack-plugin --save-dev     //清除文件或文件夹

webpack.config.js
'use strict';
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry:{//设置入口
    login:"./src/js/login.js",
    Ledgersheet:"./src/js/Ledgersheet.js",
    import:"./src/js/import.js",
    'bootstrap': 'bootstrap-loader', 
    common:"./src/js/public.js"
  },

  output:{
    path: path.resolve(__dirname, 'dist'),//设置导出目录
    filename:"js/[name].min.js",//将js导出在dist/js文件下，并命名为**.min,js
  },
  module:{
    rules:[
            {
                test: require.resolve('jquery'),
                use: 'expose-loader?jQuery!expose-loader?$'
             },//引入jquery,也可在页面直接link或js直接require
           { test: /\.css$/,
              use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
            },//借用ExtractTextPlugin.extract()处理css,让css单独导出，避免加载样式缓慢，出现页面跳转闪烁


            {  
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,  
                use: 'url-loader'  
            }, {  
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,  
                use: 'url-loader'  
            }, {  
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,  
                use: 'file-loader'  
            }, {  
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,  
                use: "url-loader"  
            },
            {
    　　　　　　test: /\.(png|jpg|icon|gif)$/,
    　　　　　　use:'url-loader?limit=8192&name=img/[name].[ext]'
    　　　　},//将图片到如到dist/img目录下
            {
    　　　　　　test: /\.html$/,
    　　　　　　use: 'html-withimg-loader'
　　　　　　}//处理html里面的图片，如不使用img  src 路径会有问题


    ]
  },
   resolve: {
    extensions: ['.js', '.json', '.scss'],
  },
  plugins:[
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "window.jQuery":"jquery"
      }),
      new ExtractTextPlugin("./css/[name].css"),
      // new webpack.optimize.UglifyJsPlugin({   //压缩代码
      //       compress: {
      //           warnings: false
      //       },
      //       except: ['$super', '$', 'exports', 'require']   //排除关键字
      //   }),
       // new webpack.optimize.CommonsChunkPlugin({
       //      name:'common', // 注意不要.js后缀
       //      chunks:['UserManage','set']
       //  }), 
       new HtmlWebpackPlugin({
          title: 'login',                   //用来生成页面的 title 元素
          template: './src/view/login.html', //模板文件路径，支持加载器，比如 html!./index.html
          filename: 'login.html',           // 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
          chunks: ['common','login'],                //允许只添加某些块 (比如，仅仅 unit test 块)
          //excludeChunks: ['dev-helper']     //排除不需要的
          inject: true,                     //inject: true | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
      }),
      new HtmlWebpackPlugin({
          title: 'Ledgersheet',//页面title
          template: './src/view/Ledgersheet.html',//引入模板
          filename: 'Ledgersheet.html',//生成文件
          chunks: ['common','Ledgersheet'],//引用模块
          inject: true,//有body等几个参数，表示引入位置
          minify: { 
                 collapseWhitespace:true,//清除空格
          },
      }),
       new HtmlWebpackPlugin({
          title: 'import',
          template: './src/view/import.html',
          filename: 'import.html',
          chunks: ['common','import'],//['bootstrap','import'],
          inject: true,
      }),
      new HtmlWebpackPlugin({
         title: 'index',
         template:"./src/view/index.html",
         filename:"index.html",
         // chunks: ['index'],
         // minify:{ 
         //      removeComments:true,
         //      collapseWhitespace:true    
         //    },

      }),
    //   new CleanWebpackPlugin(
    //         ['dist'],　 //匹配删除的文件
    //         {
    //             root: __dirname,       　　　　　　　　　　//根目录
    //             verbose:  true,        　　　　　　　　　　//开启在控制台输出信息
    //             dry:      false        　　　　　　　　　　//启用删除文件
    //         }
    //     )

    ],

    devServer: {
       historyApiFallback:true,   //无刷新更改地址栏, 可解决路由刷新  cannot GET 问题
       // contentBase: './dist/',
       port: 9000,                //指定端口
       open:true,
    }
  }

如果你的项目目录里面没有index.html 那么你直接访问http://localhost:9000/ 会报404，我找了好久也没找到怎么制定默认访问页面，最后只能用一个笨方法来解决，下面说一下我这个笨方法，如果你知道怎么制定默认页面还请告诉，十分感激
新建一个index页面，在页面上处理跳转到你想要的页面。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
         <title></title>
        <link rel="shortcut icon" type="image/x-icon" href="../img/logo.png" media="screen" />
    </head>
    <body onload="defaultUrl()">
    </body>
    <script type="text/javascript">
        function defaultUrl(){
            location.href='Ledgersheet.html';
        }
    </script>
</html>

有不明白之处可qq1574697828,大家互帮互助，如果你知道怎么制定默认页面也请告诉我