用 webpack 替换 requirejs 打包

这篇文章里，使用requirejs对项目进行了打包，现在替换为 webpack 进行打包：

可以看到项目文件夹下多了 package.json 和 webpack.config.js
文件，以及 node_modules 文件夹。
我在package.json 写入了webpack 打包所需要的依赖，以及定义了 scripts 字段，以便更方便的执行 webpack，但是使用webpack 之前，你还要 编辑 webpack.config.js 文件，众所周知，webpack 最重要的就是 如何写配置文件了：

const path = require('path'), //引入node 原生模块path，用来生成与当前系统相适应的绝对路径
  ExtractTextPlugin = require('extract-text-webpack-plugin'), //抽取 CSS 的插件
  WebpackNotifierPlugin = require('webpack-notifier'); //webpack 编译提示插件

  let base = {  //下面的 entry 入口字段，可以是字符串、对象、数组、函数等 ，这里使用 对象形式
    index: './src/js/app/index.js'
  }

  module.exports = {

    devtool: 'source-map', //配合 target 用来生成source-map 文件，以便 开发调试 debug 等， devtool 意指 开发工具
    target: 'web',
    entry: base,
    output: {    //指定输出目录，和文件名
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js'
    },

    resolve: {  //resolve字段最常用的就是 alias （别名）属性，用来把一些冗长的路径替换为简单的字符，以便js中引入模块时更简洁
      alias: {
        gotop: path.resolve(__dirname, 'src/js/com/gotop.js'),
        carousel: path.resolve(__dirname, 'src/js/com/carousel.js'),
        waterfall: path.resolve(__dirname, 'src/js/com/waterfall.js')
      }
    },

    plugins: [  //在最开始 require 插件后，这里还要在 plugins 字段中，创建插件实例
      new WebpackNotifierPlugin({
        title: 'Webpack 编译成功',
        alwaysNotify: true
      }),
      new ExtractTextPlugin({
        filename: "[name].css",
        disable: false,
        allChunks: true
      })
    ],

    module: {  //webpack 2 对比 webpack 1 在 module 字段这里做了改进，更符合逻辑和语义化
      rules: [
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({  //以便在这里使用插件对象定义的的方法
            fallback: 'style-loader',
            use: {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }
          })
        }
      ]
    }

  }

最终输出的 js 文件只有一个，但是会有上万行代码：

因为其中包括了 jQuery 源码，以及对 AMD 规范，也就是对requirejs 语法的处理，否则我的模块中使用的 define 等模块定义的语法，浏览器当然是不认识的。

注意这里 虽然模块中还是用的AMD规范，但我并没有引入 requirejs 源码，因为首先 webpack 原生支持了 CommonJs 、AMD 等模块风格，编译时会自动识别进行处理，最终输出的打包文件中，虽然引入没有requirejs源码，但是 webpack 做了类似的定义，最终在html 中引入打包好的 js 文件，浏览器成功运行。

github 代码地址
演示地址