webpack2 项目构建一

最近工做忙，学习被暂停了，仍是网上多看看资料，多学习学习一下，看到一些好的资料，本身想整理一下，这不，webpack2项目构建都尚未弄懂，webpack3就已经发布了，说实话周末如今真不想看书和研究东西，拿着手机玩玩游戏，看看电视真爽，可是IT行业没有办法，技术在不断的更新，不学习安慰安慰一下本身，内心过不去，万一过1-2年被淘汰了，找份工做都不容易，所以仍是多学习学习下，资料多整理一下，刚看完，阮一峰老师写的 45岁之后的人生 

说实话，感慨确定有，不要说45岁之后，就说30来岁，如今周末都不想去折腾技术，因此IT行业会为之后担心的，好了先不说了；

项目的目录结构以下：

### 目录结构以下：
demo                                        # 工程名
|   |--- dist                               # 打包后生成的目录文件             
|   |--- node_modules                       # 全部的依赖包
|   |--- src                                # 项目的文件包
|   |    |--- common
|   |    |     |---css                      # 公用页面的css文件
|   |    |     |---js                       # 公用页面的js文件
|   |---
|   |--- .babelrc                           # 支持es6      
|   |--- .gitignore  
|   |--- README.md
|   |--- index.html                         # 首页入口文件
|   |--- package.json                      
|   |--- webpack.config.js                  # 配置文件 
|   |--- webpack.production.config.js       # 上线打包配置文件

webpack 配置项以下代码：

// 导入路径包
const path = require('path'); 
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //开启sourceMap便于调试
    devtool: 'eval-source-map', 

    //入口文件，
    entry: './src/main.js', 

    output: {
        // 输出文件到当前目录下的 build文件夹内
        path: path.resolve(__dirname, 'build'), 

        publicPath: '/assets/', //指定资源文件引用的目录

        filename: 'bundle.js' // 指定打包为一个文件 bundle.js
        // filename: '[name].js' // 能够打包为多个文件

    },
    // 使用loader模块
    module: {
        /* 
         * 在webpack2.0版本已经将 module.loaders 改成 module.rules, 固然module.loaders也是支持的。
         * 同时链式loader(用!链接)只适用于module.loader，同时-loader不可省略 
         */
        rules: [
          {
            test: /\.css$/,
            use: [
              'style-loader', {
                loader: 'css-loader',
                options: {
                  // modules: true // 设置css模块化,详情参考 https://github.com/css-modules/css-modules
                }
              }, 
              {
                loader: 'postcss-loader',
                // 参考 https://github.com/postcss/postcss-loader
                options: {
                  plugins: function() {
                    return [
                      require('autoprefixer')
                    ];
                  }
                }
              }]
          }, 
          {
            test: /\.styl(us)?$/,
            use: [
                'style-loader', 'css-loader', {
                   loader: "postcss-loader",
                   options: {
                      plugins: function() {
                        return [
                          require('autoprefixer')
                        ];
                      }
                    }
                }, 'stylus-loader']
          }, 
          {
            test: /\.js$/,
            loader: 'babel-loader', 
            exclude: /node_modules/ //须要排除的目录
          }
        ]
    },
    // 配置devServer各类参数
    devServer: {
        // contentBase: "./",   // 本地服务器所加载的页面所在的目录
        hot: true,              // 配置HMR以后能够选择开启
        historyApiFallback: true, // 不跳转
        inline: true // 实时刷新
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new webpack.HotModuleReplacementPlugin() // 热加载插件
    ]
}

package.json 打包配置以下：

"scripts": {
    "start": "webpack-dev-server",
    "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"
  },

在项目中 进入项目的根目录后，运行 npm run start 便可运行项目；
在webpack2.0中使用 module.rules 来 代替以前的 module.loaders， 而且使用了 postcss-loader 插件，该插件的做用是：
用来对 .css文件进行处理，并添加在 style-loader 和 css-loader 以后，经过一个额外的 postcss方法来返回所须要使用的 PostCss插件，好比，代码返回
require('autoprefixer') 的做用是 加载 Autoprefixer插件。那么Autoprefixer插件的做用是为 css中的属性添加浏览器特定的前缀，由于一些css新属性，
各个浏览器下并不支持，所以使用该插件就能够作这些事情，好比在页面的代码以下：

h1 {
  display: flex;
}

那么实际在页面上，经过Autoprefixer插件会自动渲染为：

h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

该插件就是解决浏览器前缀的问题，固然还有不少插件均可以往这个里面加。
在webpack的配置文件中能够对devServer 配置以下：

devServer: {
  // contentBase: "./",   // 本地服务器所加载的页面所在的目录
  hot: true,              // 配置HMR以后能够选择开启
  historyApiFallback: true, // 不跳转
  inline: true // 实时刷新
}

这时候咱们就能够监听入口文件的改变，好比目前项目中的入口文件是 main.js，那么main.js及全部经过import进来的css和js文件进来的，只要有修改，都会
实时刷新，可是html文件修改不能实时刷新了，修改后须要咱们手动刷新了。如上配置 devServer的 "inline"选项会为页面添加 "热加载"功能，"hot"功能
会开启 "热替换"，即首先从新加载组件改变的部分(不是从新加载整个页面)，若是两个参数都有的话，当资源改变时，webpack-dev-server将先尝试 热替换，
若是失败则会从新加载整个页面。 可是要实现热加载的话，还须要在代码中加入以下代码：

plugins: [
  new webpack.HotModuleReplacementPlugin() // 热加载插件
]

配置中 devtool: 'eval-source-map', 配置会生成map文件，便于调试代码。

webpack2.0增长了对ES6模块的支持，不须要任何配置，webpack只针对 import导入和export 导出 的模块才会被编译为ES5，若是想全部的打包文件被编译成ES5的话，须要使用babel编译器转换，所以须要按照babel，而后在项目的根目录文件下 添加 .babelrc文件便可；

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

而且在webpack中须要添加loader，以下：

{
  test: /\.js$/,
  loader: 'babel-loader', 
  exclude: /node_modules/ //须要排除的目录
}

git上代码链接