webpack

entry:配置入口资源

入口起点告诉 webpack 从哪里开始，并根据依赖关系图确定需要打包的内容。可以将应用程序的入口起点认为是根上下文(contextual root) 或 app 第一个启动文件。

module.exports = {
   entry: './path/to/my/entry/file.js'
}

也可以写成

module.exports = {
   entry: {
    main: './path/to/my/entry/file.js'
  }
}

output:配置编译后的资源

将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。

filename: 用于输出文件的文件名。
path: 目标输出目录 path 的绝对路径。

module.exports  = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

如果有多个入口起点，则应该使用占位符来确保每个文件具有唯一的名称。

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

module:资源处理

由于webpack自身只理解javascript，所以在加载javascript之外的其他元素时，我们需要引用其对应的loader，将其转换为javascript。

配置loader有两个目标：test、use

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

resolve:配置资源别名/扩展名等

plugins:插件，比loader更强大

插件目的在于解决 loader无法实现的其他事。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;