webpack整理

image.png
本篇文章基于webpack官网对webpack的基本概念进行的总结。 主要基于entry, output, loader, plugin, mode几方面阐述，本篇福比较容易理解。 image.png

webpack是基于入口的。webpack会自动的递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理加载不同的文件，用plugin来扩展webpack功能。
webpack思维导图整体思想

entry（入口）

可以在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

image.png

我们看一个 entry 配置的最简单例子：
webpack.config.js

• 单个入口（简写）语法
  用法：entry: string|Array<string>

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

entry 属性的单个入口语法，是下面的简写：

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

• 对象语法
  用法：entry: {[entryChunkName: string]: string|Array<string>}
  webpack.config.js

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

• 动态入口

输入为一个函数（同步或异步），用于动态的返回上面所需 的入口内容。

module.exports = {
    entry: () => new Promise((resolve) => resolve(['./src/demo', './src/demo2']))
}

output（出口）

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output。

image.png

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

多个入口起点对应的出口文件

module.exports = {
   entry: {
      app: './src/app.js',
      goods: './src/goods.js'
  },
   output: {
      filename: '[name].js',
      path: __dirname + 'dist'
  }
}
//写入到磁盘： ./dist/app.js   ./dist/goods.js

loader（加载器）

直译为“加载器”。webpack将一切文件视为模块，但是webpack原生是只能解析js文件，所以loader作用是让webpack拥有了加载和解析非javascript文件的能力。

image.png

• file-loader
• css-loader
• ts-loader
• style-loader
• url-loader
• image-loader
• babel-loader
• eslint-loadr
• source-map-loader

webpack.config.js

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

    },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

plugins（插件）

直译为“插件”。plugin可以扩展webpack的功能，让webpack具有更多的灵活性。

image.png

• define-plugin
• commons-chunk-plugin
• uglifyjs-webpack-plugin
• paralleUglifyPlugin

webpack.config.js

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;

mode 模式

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

image.png

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