我的学习历程——Webpack（一）

初始化webpack

---

1. 新建文件夹mywebpack, 进入后执行 npm init -y

此时该文件夹目录下会多出一个 package.json 文件，表示此文件夹成为具有包规范的文件夹

2. 执行npm install webpack webpack-cli --save-dev

初始化webpack工程

3. 可用命令

• npm info webpack 查看历史版本信息
• npx webpack -v 查看当前已安装的版本信息

4. 开始一个项目

   1. 当前文件目录

      
      初始化1.png

   2. 新建src文件夹，并在其中新建文件 index.js，在文件内只写一段代码

     console.log('hello webpack')
   

   因为webpack的默认配置的entry入口即为 './src/index.js'

   3. 开始打包 npx webpack

   Built at: 2019-10-18 11:16:30
   Asset       Size  Chunks             Chunk Names
   main.js  958 bytes       0  [emitted]  main
   Entrypoint main = main.js 
   [0] ./src/index.js 28 bytes {0} [built] //入口文件  
   

   此时会在项目目录里多出一个dist目录，和一个main.js， 作为测试，可以新建一个html文件，引入main.js文件，即可看到console.log的内容。

编译多种后缀文件，利用在module中定义xx-loader

---

一、 css-loader 从css文件中提取内容并编译到文件中

1. 在根目录下新建 webpack.config.js文件， webpack在打包时会去根路径下查找此文件
   如果定义其他文件名的配置文件，则打包时需要使用 npx webpack --config xxx(新文件名) 命令，
   或者在package.json中的script中增加，如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config new.webpack.config.js"
  },

2. 在index.js中引入css文件

import "index.css"

3. 选择css-loader 和style-loader , 执行npm i style-loader css-loader -D

• css-loader 分析css模块之间的关系，并合并为一个字符串
• style-loader 把css-loader生成的字符串内容，以<style>方式挂载到页面的head部分

4. 配置loader, 多个loader 从后向前顺序执行

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

---

二、 file-loader 处理静态资源模块，把资源模块移动到输出目录上，并返回一个地址名称

场景为当我们需要的模块，仅仅是从源代码挪移到打包目录，txt, svg, csv, excel, 图片等。

1. 执行npm i file-loader -D
2. 在rules中增加对资源文件的拦截模块，此时配置后打包出的文件中即带有个名为长串hash值的资源文件

   {
     test: /\.(png|jpe?g|gif)$/,
     use: {
       loader: 'file-loader'
     }
   },
   

3. 配置参数, 可以在use中增加options对象参数，用来处理输出文件格式

   options: {
          name: '[name]_[hash:6].[ext]',
          outputPath: 'images/'
        }
   

4. 生成文件为下图

   
   图片.png

5. file-loader 亦可处理字体文件

   {
       test: /\.(eot|ttf|woff|woff2|svg)$/,
       use: {
         loader: 'file-loader',
         options: {
           name: '[name]_[hash:6].[ext]'
         }
       }
     }
   

三、 url-loader 同样是处理文件的loader，内部调用file-loader, 只有limit字段，功能是将文件转换为base64格式再存储到js中

{
  loader: 'url-loader',
  options: {
    limit: 8192
  }
}

四、 less-loader 处理less文件

$ npm install less less-loader --D

此处需将less 一并下载下来

五、 'Postcss-loader'

$ npm install Postcss-loader autoprefixer --D
autoprefixer 自动增加前缀

主要plugin

---

可作用域整个打包过程，类似生命周期的钩子函数，通过注入扩展逻辑来改变构建结果

---

一、CleanWebpackPlugin

自动删除目标文件夹中的文件
npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
...

 plugins: [
   new CleanWebpackPlugin()
 ]

二、HtmlWebpackPlugin

自动创建模板html 文件
npm install --save-dev html-webpack-plugin

const htmlWebpackPlugin = require("html-webpack-plugin")
...
new htmlWebpackPlugin({
      title: 'webpack 首页',
      filename: 'index.html',
      template: './src/index.html'   // 指定文件模板
    })

三、MiniCssExtractPlugin

自动将css文件提取到一个文件css文件中
npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  ...
 module: {
    rules: [
        { 
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'] //此时将style-loader 替换
        },
    ]
  }，
  plugins: [
      new MiniCssExtractPlugin({
          filename: '[name][chunkhash:8].css',
      })
  ]