Webpack基础使用

一、

1.1初始化项目

npm init -y

1.2安装Webpack

npm install webpack webpack-cli --save-dev

1.3写项目

    |- package.json
    |- /dist
        |- index.html
    |- /src
        |- index.js

1.4 执行webpack打包

执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。

二、使用配置文件

2.1 webpack.config.js

根目录创建webpack.config.js，进行webpack打包是默认使用该配置文件进行打包,
该配置文件规定了打包的入口以及出口文件

const path=require('path')

module.exports={
  entry: './src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname, 'dist')
  }
}

三、管理资源

3.1加载CSS

要想在js中引入css文件，需要安装style-loader和css-loader插件
npm i --save-dev style-loader css-loader
并且在webpack.config.js中进行配置:

const path=require('path')

module.exports={
  entry: './src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname, 'dist')
  },
  module:{
    rules:[
      {
        test:'/\.css$/',
        use:["style-loader","css-loader"]
      }
    ]
  }
}

配置module的rules，用正则表达式匹配css文件并提供给style-loader和css-loader插件
在打包入口js文件中引入css文件import './style.css'
运行npx webpackcss文件设置到了页面中。

css-loader它的作用实际就是能识别导入的css这个模块，并通过特定的语法规则进行内容转换，但页面无法使用它。
而style-loader原理是通过一个JS脚本创建一个style标签，里面会包含一些样式。并且它是不能单独使用的，因为它并不负责解析css之前的依赖关系

3.2加载图片

使用file-loader可以让我们在js和css中引入一些静态资源, 同样的, 要先在webpack.config.js安装配置
npm i --save-dev file-loader

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      ,
      { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] }
    ]
  }
};

同样通过正则表达式匹配静态资源使用file-loader插件，再通过options可以改变打包静态资源出口的命名和位置

         {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "images/"
            }
          }

3.3加载字体

依旧使用file-loader,但在webpack.config.js配置

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

四、管理输出

4.1设置Html-Webpack-Plugin插件

该插件的作用是为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

npm i --save-dev html-webpack-plugin

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Output Management"
    })
  ],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "images/"
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"]
      }
    ]
  }
};

在HtmlWebpackPlugin中除了title外还可以配置：

• filename {String } 默认为 index.html, 这个是指定你生成的index.html的路径和名称;
• template { String } 默认为 '', 有时候你想要自己写生成的index.html文件, 这个属性就是指定你的模版路径的.
• favion {String} 指定你生成index.html的图标。

五、简单原理概括

webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

1. 初始化参数
2. 开始编译 用上一步得到的参数初始Compiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译
3. 确定入口 根据配置中的 Entry 找出所有入口文件
4. 编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再 找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5. 完成模块编译 在经过第4步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。