webpack 学习笔记

简单的webpack配置：

// webpack.config.js
require('webpack')
modual.exports = {
      entry: 'main.js', // 入口文件
      output: {   // 打包后输出文件
           path: __dirname + "/dist",
           filename: 'bundle.js',
      },
      module: { // loader
        loaders: [
          {
           test: /\.js$/,
           loader: 'babel',
           exclude: /node_modules/
          }
       ]
    }
}

1、entry&&output

     entry三种写法：

• 字符串语法   （单个入口文件，单个输出文件）

module.exports = {
  context: __dirname,
  entry:  "./app.js",
  output: {
    path: __dirname + '/dist',
    filename: "[name].bundle.js"
  }
}

• 数组语法（多个入口文件，单个输出文件）

module.exports = {
  // 多个入口文件，单个输出文件
  context: __dirname,
  entry: {
    app: ["./app.js", "./test.js", "./hello.js"],
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  }
};

• 对象语法（多个入口文件，多个输出文件）

module.exports = {
  context: __dirname,
  entry: {
    app: "./app.js",
    test: "./test.js",
    hello: "./hello.js"
  },
  output: {
    path: __dirname + '/dist',
    filename: "[name].bundle.js"
  }
}