版本：4.0

配置文件：webpack.config.js

4.0 可以不用配置webpack.config.js

入口entry

可以配置一个或多个入口起点

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

出口output

配置输出的地址，bundles

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

处理js不能处理的，然后转化成依赖图

const path = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

pluginns 插件

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

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式

module.exports = {
  mode: 'production'  //production 或者 development
};

命令行

npm init : 初始化项目
npm i -g webpack --save-dev : 全局安装
npm i -D webpack： 在开发环境中安装

基本项目构建三个文件

app.js--webpack运行的入口程序
index.html--本示例中的网页文件
module.js--一个js模组