Webpack入门教程二

上一篇我们提到了当我们项目比较复杂需要打包的文件较多时，就需要用到我们的webpackconfig.js配置文件。

webpack.config.js文件创建在我们项目的根目录下：

   //cd  切换到项目目录下创建配置文件
   vim webpack.config.js

项目目录结构:

    //一般我们相对简单的项目使用以下目录
    project demo
      ./src  //项目开发目录
      ../html  //html文件目录
      ../css  //css文件目录
      ../js  //js文件目录
      ./node-modules   //项目的依赖模块文件目录
      ./package.json  //npm配置文件
      ./webpack.config.js  //webpack配置文件
      ./dist  //项目最终打包分发目录

webpack.config.js文件配置:

    //文件配置的参数
    entry: 入口文件
    output: 打包输出文件
    module-loader：模块加载器
    plugins：插件

先安装我们所需要的module-loader：

   //cd 项目目录
   npm install style-loader css-loader --save-dev
   npm install file-loader --save-dev
   npm install url-loader --save-dev
   npm install babel-loader --save-dev

下面我们来编写这个文件：

    var webpack = require('webpack');
    module.exports = {
    entry: {
        index: './src/js/index.js'
      },
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
      },
    module: {
        loaders: [
          { 
            test: /.\css$/,  \\匹配css文件
            exclude: /node-modules/,  \\匹配不包含的目录
            loader:  'style-loader!css-loader',
          },
          { 
            test: /.\js$/,  \\匹配js文件
            exclude: /node-modules/,  \\匹配不包含的目录
            loader:  'babel-loader'
          },
          {
            test: /.(png|jpg)$/,
            exclude: /node-modules/,
            loader: 'url-loader?limit=8192'  //limit表示小于8K时自动base64图片加载器
          }
        ]
      },
    plugins: [
      //插件配置
      ]
    };

以上是简单的配置，详细请浏览官方文档：Webpack.config配置

   //运行webpack命令，-h帮助
   webpack  //没有报错将会在我们制定的目录看到输出的文件
   webpack --watch  //监听文件变化并自动打包

因为我们的index.html文件的目录发生了变化，webpack打包过后原来的html中script src的路径引用会错误，需要手动修改或者移动dist目录。
下一篇章我们将继续学习webpack相关的一些配置。