webpack 4 入门

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

// weboack.config.js
const path = require('path') // Node.js 核心模块，用于操作文件路径

代码示例：
module.exports = {
  entry: './path/to/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '<WhateverYouLike>.js'
  }
}

// webpack.config.js
const path = require('path')

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

// webpack.config.js
const HtmlWebpackPlugn = require('html-webpack-plugin') // 提前通过 npm 安装
const webpack = require('webpack') //用于访问内置插件

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

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

// 可简写为如下形式
module.exports = {
  enrty: './path/to/enrty/file.js'
}

/*
 * 当你需要为只有一个入口的应用程序或工具（library）快速设置 webpack 配置时，
 * 简写会是个很不错的选择。然而，使用此语法在扩展配置时有失灵活性。
 */

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
}

// 对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js'
    vendors: './src/vendors.js'
  }
}

/*
 * webpack 从 app.js 和 vendors.js 开始创建依赖图。
 * 这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导）。
 * 这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序中。
 * 
 * 此设置允许你使用 CommonsChunkPlugin 从应用程序依赖图中提取 vendor 到 vendor 依赖图，并把引用 vendor 的部分替换为 __webpack_require__() 调用。
 * 如果应用程序依赖图中没有 vendor 代码，那么你可以在 webpack 中实现被称为长效缓存的通用模式。
 * 说实话，目前看不懂上面这段话，所以也不晓得怎么通俗的表述。
 */

// webpack.config.js
module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
}

/*
 *  webpack 分离 3 个的依赖图
 *
 * 在多页应用中，每当页面跳转时服务器将为你获取一个新的 HTML 文档。
 * 页面重新加载新文档，并且资源被重新下载。这给了我们特殊的机会去做很多事：
 * 使用 CommonsChunkPlugin 使所有页面的应用程序共享代码创建依赖图，
 * 入口增多，多页应用能够复用不同入口的大量重复代码/模块。
 */

// webpack.config.js
module.exports = {
  output: {
    filename: '<WhateverYouLike>.js',
    path: '/path/to/project'
  }
}

// 此配置将一个单独的 .js 文件输出到 /path/to/project 目录中。

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

// 写入到硬盘：./dist/app.js, ./dist/search.js

// webpack.config.js
module.exports = {
  ...
  output: {
    publicPath: '/assets/',
    chunkFilename: '[id].chunk.js'
  }
};

/*
 * HTML loader 输入出：<link href="/assets/spinner.gif" />
 * CSS：background-image: url(/assets/spinner.gif);
 * 静态资源最终访问路径 = output.publicPath + loader 或插件等配置路径
 */

// webpack.config.js
module.exports = {
  ...
  devServer: {
    publicPath: '/assets/'
  }
};

/*
 * 现在可以通过 http://localhost:8080/assets/bundle.js 访问 bundle。
 * 确保 publicPath 总是以斜杠(/)开头和结尾。
 * devServer.publicPath 也可以是一个完整的 URL。
 * 一般情况下都要保证 devServer.publicPath 与 output.publicPath 保持一致。
 */

// webpack.config.js
module.exports = {
  ...
  devServer: {
    // 推荐使用绝对路径。
    contentBase: path.join(__dirname, 'public')
  }
};

// 也可以从多个目录提供内容
module.exports = {
  ...
  devServer: {
    contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')]
  }
};

// 具体作用不详，官网并没有给出说明也懒得查了

// webpack.config.js
...
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

module.exports = {
  ...
  publicPath: BASE_URL,
  ...
}
// 方法来自 iview-admin vue.config.js
// 我不知道我理解的动态设置对不对，不过官网给的 __webpack_public_path__ 我没看明白

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

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

import Styles from 'style-loader!css-loader?modules!./styles.css';

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

// ConsoleLogOnBuildWebpackPlugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    // compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。
    // 建议为此使用一个常量，以便它可以在所有 hook 中复用。
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('webpack 构建过程开始！');
    });
  }
}
// 插件编写属于比较深入的内容，这里不过多探讨，目前仅需要知道实现原理即可

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

module.exports = {
  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 HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

// webpack.config.js
module.exports = {
  ...
  mode: 'production'
};

webpack --mode=production

// webpack.config.js
var config = {
  entry: './app.js'
  ...
}

module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    ...
  }

  return config
}

// 已经取得文件的绝对路径，因此不需要进一步再做解析。
import '/home/me/file';
import 'C:\\Users\\me\\file';

// 在这种情况下，使用 import 或 require 的资源文件所在的目录，被认为是上下文目录。
// 在 import/require 中给定的相对路径，会拼接此上下文路径，以产生模块的绝对路径。
import '../src/file1';
import './file2';

import 'module';
import 'module/lib/file';
// 解释很啰嗦，感兴趣可以自己去看一下文档