webpack初学者笔记1

webpack初学者笔记1

学习路径：阮一峰webpack和webpack官网

初始化安装

1.webpack安装

npm install --save-dev webpack

2.webpack脚手架安装，初始化package.json

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

webpack模块

先看一下webpack.config.js文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  devtool: "inline-source-map",
  plugins: [
    // new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "输出的HtmlWebpackPlugin",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif)/,
        use: ["file-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.(csv|tsv)$/,
        use: ["csv-loader"],
      },
      {
        test: /\.xml$/,
        use: ["xml-loader"],
      },
    ],
  },
};

entry：打包入口文件。可以是单文件（entry：'/index.js'）,多文件时以对象存入。
output：打包后生成的文件。filename属性->输出文件名称，可以输出多个文件，文件名称为入口的对象key值(filename:"[name].bundle.js"),[name]就指代entry多个时的key。path属性->打包生成文件放在那个路径下。
plugins：webpack打包时采用的插件。如'html-webpack-plugin'插件将打包的html文件格式化。
module：通常用为加载各类文件。用不同的loader加载打包不要的文件。列：rules:[{test: /.css$/,use: ["style-loader", "css-loader"]}] module下有rules属性，里面包含test和use属性，test为加载的文件的正则。use为加载对应的loader模块，用对应的loader去解析对应的文件，解析顺序为右到左。

webpack常用loader

1.加载scc style-loader 和 css-loader

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

2.加载图片和字体 file-loader

npm install --save-dev file-loader

3.加载数据xml和csv csv-loader xml-loader

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