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