0.概念

webpack.config.js

入口

• 单个入口 entry: string|Array<string>

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

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

• 对象语法 entry: {[entryChunkName: string]: string|Array<string>}

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

• 多页面应用程序

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

输出

const path = require('path');
const config = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

module.exports = config;

• 多入口输出

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

• 高级进阶 (使用 CDN 和资源 hash 的复杂示例)

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

模式

• production 或 development

module.exports = {
  mode: 'production'
};

loader

npm install --save-dev css-loader style-loader
npm install --save-dev ts-loader

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

loader使用方式

• 配置 | 内联 | Cli

插件

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: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

配置

• 基本配置
• 多个Target
• 其他配置