webpack 学习笔记

webpack 学习笔记总结，仅供自己 webpack 学习使用。

安装与初始化

在项目根目录执行命令：

npm init -y
npm install webpack webpack-cli --save-dev

调整 package.json 文件，以便确保我们安装包是 私有的(private)，并且移除 main 入口。

+   "private": true,
-   "main": "index.js",

webpackMerge

为每个环境编写彼此独立的 webpack 配置。安装webpack-merge

npm install --save-dev webpack-merge

webpack.common.js

const path = require('path');
module.exports = {
  // 配置内容
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  // 开发环境配置
});

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  // 生产环境配置
});

入口

entry：起点或是应用程序的起点入口。

webpack.config.js

entry: {
  home: './src/index.js',
}

出口

output ：指示 webpack 如何去输出、以及在哪里输出你的 bundle、asset 和其他你所打包或使用 webpack 载入的任何内容。

output.path：output 目录对应一个绝对路径。

webpack.config.js

output： {
    path: path.resolve(__dirname, 'dist/assets')
}

output.filename ：决定了每个输出 bundle 的名称。

webpack.config.js

output： {
    // 静态名称
    filename: "bundle.js"
    // 入口名称
    filename: "[name].bundle.js"
    // 内部 chunk id
    filename: "[id].bundle.js"
    // 唯一的 hash 生成
    filename: "[name].[hash].bundle.js"
    // 基于每个 chunk 内容的 hash
    filename: "[chunkhash].bundle.js"
}

资源管理

loader：让 webpack 能够去处理那些非 JavaScript 文件。

加载 CSS

安装并添加 style-loader 和 css-loader

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

webpack.config.js

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

加载图片

安装 file-loader

npm install --save-dev file-loader

webpack.config.js

module: {
  rules: [
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader'],
    },
  ];
}

加载字体

安装 file-loader

npm install --save-dev file-loader

webpack.config.js

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader'],
    },
  ];
}

加载数据

安装 csv-loader 和 xml-loader

npm install --save-dev csv-loader xml-loader

webpack.config.js

module: {
  rules: [
    {
      test: /\.(csv|tsv)$/,
      use: ['csv-loader'],
    },
    {
      test: /\.xml$/,
      use: ['xml-loader'],
    },
  ];
}

babel

安装 babel-loader

npm install --save-dev babel-loader babel-core babel-preset-env
npm install --save-dev babel-plugin-transform-runtime

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/
      },
    ],
  },
};

.babelrc

{
  presets: ['@babel/preset-env'],
  plugins: ['@babel/transform-runtime']
}

输出管理

HtmlWebpackPlugin

安装 html-webpack-plugin

npm install --save-dev html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

CleanWebpackPlugin

安装[clean-webpack-plugin]()

npm install --save-dev clean-webpack-plugin

webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin(...),
  ],
};

开发环境

sourceMap

JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。

webpack.config.js

module.exports = {
  devtool: 'eval-source-map|cheap-eval-source-map|eval|cheap-module-eval-source-map',
};

webpackDevServer

安装 webpack-dev-server

npm install --save-dev webpack-dev-server

devServer 常见配置表

配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
port	设置默认监听端口，默认为”8080“
inline	设置为true，当源文件改变时会自动刷新页面
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
compress	为所服务的一切启用 gzip 压缩
open	dev-server在服务器启动后打开浏览器
hot	启用热加载
publicPath	此路径下的打包文件可在浏览器中访问

webpack.config.js

module.exports = {
  devServer: {
    hot: true, // 热加载
    inline: true, // 自动刷新
    open: true, // 自动打开浏览器
    historyApiFallback: true,
    host: 'localhost', // 主机名
    port: 3000, // 端口号
    compress: true,
  },

  plugins: [
    // 显示模块相对路径
    new webpack.NamedModulesPlugin(),
    // 启用 HMR
    new webpack.HotModuleReplacementPlugin(),
  ],
};

生产环境

需要优化，压缩，缓存以及分离 CSS 和 JS。

sourceMap

webpack.config.js

module.exports = {
  devtool: 'none|source-map|hidden-source-map|nosources-source-map',
};

MiniCssExtractPlugin

使用 ExtractTextPlugin 将 CSS 分离成单独的文件。

安装 mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // ...
            },
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(options),
  ],
};

CommonsChunkPlugin

CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。

webpack.config.js

const webpack = require('webpack');
module.exports = merge(common, {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
        filename: "commons.js",
    })
  ],
});