webpack4学习

初学

1、中文官网地址：
从指南开始学习实践操作
https://www.webpackjs.com/guides/
1.1 安装 webpack 和
webpack-cli -D(使用 webpack 4+ 版本，你还需要安装 CLI,开发环境中使用)

2、按照官网的操作，加入clean-webpack-plugin 后报错
把代码改为以下则可以了：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
   // 在每次构建前清理 /dist 文件夹
   new CleanWebpackPlugin(),
 ]

3、有时候安装依赖包的时候会出现各种错误，如：
npm WARN checkPermissions Missing write access to...
这时候尽管试试删掉node_modules,然后重新 npm install

4、webpack.config.js("start": "webpack-dev-server --open",)

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  // mode: "development",
  // 压缩输出
  mode: "production",
  /* 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始;webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
  每个依赖项随即被处理，最后输出到称之为 bundles 的文件中 */
  entry: {
    app: './src/index.js',
  },
  devtool: 'inline-source-map',
  plugins: [
    // 在每次构建前清理 /dist 文件夹
    new CleanWebpackPlugin(),
    // 创建一个全新的index.html，所有的 bundle 会自动添加到 html 中
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    // 查看要修补(patch)的依赖
    new webpack.NamedChunksPlugin(),
    // 模块热替换(Hot Module Replacement 或 HMR)，webpack 提供的最有用的功能之一
    new webpack.HotModuleReplacementPlugin()
  ],
  /* 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件 */
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    // 告诉开发服务器（webpack-dev-server），在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
    contentBase: path.join(__dirname, "../dist"),
    hot: true
  }
};

5、server.js ("server": "node server.js")

/* webpack-dev-middleware 配合 express server 的示例*/

const express = require('express');
const webpack = require('webpack');
/* webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。
 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。*/
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

6、代码分离
动态导入
index.js

// import _ from 'lodash';

function getComponent() {
  // 在注释中使用了 webpackChunkName。这样做会导致我们的 bundle 被命名为 lodash.bundle.js
  return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }).catch(error => 'An error occurred while loading the component')

}

getComponent().then(component => {
  document.body.appendChild(component)
})

webpack.common.js

  output: {
    filename: '[name].bundle.js',
   //
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

7、缓存

 filename: '[name].[chunkhash].js',

node API: http://nodejs.cn/api/fs.html

找到新的学习文章

https://mp.weixin.qq.com/s/a0QFhcbwkhXStBfMOe7exA