• 安装Webpack
  
• 切换开发模式
  
• 设置plugins配置文件
  
• 设置快捷打包
  
• 安装webpack-server及配置
  
• 自由切换开发模式
  
• 安装SCSS
  
• 安装LESS
  
• 安装Stylus
  
• 引入图片
  
• 查找资料关键字
  

一、安装Webpack

查看版本号

npm info webpack version
npm info webpack

安装

npm init -y
npm i -g webpack@4 webpack-cli@4 或者 yarn add webpack-cli --dev

查看本地webpack版本号

./node_modules/.bin/webpack --version 或者 npx webpack --version

运行webpage

./node_modules/.bin/webpack 或者 npx webpack

二、切换开发模式

webpack.config.js

module.exports = {
    mode： '模式' // development——开发模式 production——发布模式
}

三、设置plugins配置文件

- JS

• 自动生成JS文件，并导入到dist解析后的html中
  

webpack.config.js

  module.exports = {
      mode： '模式', // development——开发模式 production——发布模式
      entry: '默认解析文件的路径', // 如：'./src/index.js'
      output: {
        path: path.resolve(__dirname, '保存位置新建文件夹的名字'), // 默认为dist
          filename: '解析后重命名为' // 如：'main.js'
    }
  }

设置导出后的名字带hash

  filename: '[name].[contenthash].js'

- HTML

• 自动生成html
  

添加plugin插件

  yarn add html-webpack-plugin --dev

webpack.config.js

添加引入

  var HtmlWebpackPlugin = require('html-webpack-plugin')

  module.exports = {
      mode： '模式', // development——开发模式 production——发布模式
      entry: '默认解析文件的路径', // 如：'./src/index.js'
      output: {
        path: path.resolve(__dirname, '保存位置新建文件夹的名字'), // 默认为dist
          filename: '解析后重命名为' // 如：'main.js'
    },
      plugins: [new HtmlWebpackPlugin()] // 每次运行自动生成HTML，并把生成的hash更新
  }

• 自定义title名字
  

  plugins: [new HtmlWebpackPlugin(
    tilte: '自定义网页名字'
  )]

• 自定义html模板
  

  plugins: [new HtmlWebpackPlugin(
    tilte: '自定义网页名字',
      template: '模板路径' // 根据你的html模板，来自动生成html
  )]    

将模板html的标题板顶

  <title><%= htmlWebpackPlugin.options.title %></title>

- CSS

• 导入CSS文件
  

安装 css-loader 和 style-loader

  yarn add css-loader
  yarn add style-loader

webpack.config.js添加多一项

  module.exports = {
      ...,
      module {
        rules: [
            {
                text: /\.css$/i,
                use: ['style-loader','css-loader'], // css读到js文件里面 style生成标签放到html里面
            },
         ],
    },
  }

• 把CSS文件单独生成，并且导入到dist解析后的html中
  

终端安装相应服务

  yarn add mini-css-extract-plugin --dev

在webpack.config.js的第一行添加代码

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

在 plugins 中添加代码

  plugins: {
      new HtmlWebpackPlugin(...), // 原有的代码下面添加
      new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: '[id].css',
          ignoreOrder: false,
      }),                      
  }

接着在 module 的 rules 中，覆盖原有的use，如果本来用就注释掉，复制下面代码

  module: {
      rules: [
          test..., // 原有的代码下面添加
          use: [
            {
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '../',
                    hmr: process.env.NODE_ENV === 'development',
                },
            },
              'cass-loader',
        ],
          // use: ["style-loader","css-loader"] 把原来的use 注释掉
      ]
  }

设置导出后的文件带hash

  // 在后面加上.[contenthash]即可
  filename: '[name].[contenthash].css',
  chunkFilename: '[id].[contenthash].css',

四、设置快捷打包

在package.json 中 scripts 内添加 build 参数

"build": "rm -rf dist && webpack", // 先删除，在打包

下次打包直接输入

yarn build

或者

npm run build

五、安装webpackserver及配置

- 配置及安装

• webpack.config.js部分
  

安装之前需要先把webpack.config.js 里面的 mode（模式）改为development（开发者模式）

接着回车，在下一行添加一句

  devtool: 'inline-source-map',

终端输入指令，安装webpack-dev-server服务

  yarn add webpack-dev-server --dev

在 devtool 下面在加一段代码

  devServer: {
      contentBase: './dist',
  },

• package.json部分
  

在 build 上面添加一行代码

  "start": "webpack-dev-server --open", // --open为每次运行自动打开浏览器

- 运行服务

终端输入

yarn start

或者

npm run start

- 注意

webpack-dev-server 不会生成 dist 文件，它是直接解析后，放到内存中直接运行。每次修改完代码，直接保存，刷新即可看到效果。

六、自由切换开发模式

- 直白版

配置

• webpack.config.js(默认的用来做开发模式)
  

这个模式中，使用短的use

  use: ["style-loader","css-loader"] // 不需要缓存直接加载

• webpack.config.prod.js（生产模式）
  

这个模式中，使用配置好的use，并且删除hmr代码。并且将mode改为production（生成模式）

  use: [
      {
          loader: MiniCssExtractPlugin.loader,
          options: {
              publicPath: '../',
          },
          'css-loader',
      },
  ],

  mode: "production"

修改package.json文件

将build部分改为生产模式的配置文件

  "build": "rm -rf dist && webpack --config webpack.config.prod.js"

运行

• 开发者模式
  

  yarn start

• 生产者模式
  

  yarn build

- 继承版

配置

• webpack.config.base.js
  

复制webpack.config.js的内容，保留公共部分删掉，删除rules、mode、module、devtool、devServer等的内容

  const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成HTML插件包
  const path = require('path');

  module.exports = {
    entry: './src/index.js', // 入口路径，默认为 ./src/index.js
    output: {
      filename: '[name].[contenthash].js' // 解析后的js名字, [name].[contenthash].js
    },
    plugins: [
      new HtmlWebpackPlugin({ // 引用自动生成html的包 
      title: 'My App', // 生成html的名字
      template: 'src/assets/index.html' // 模板位置
      })
      ]
  };

• webpack.config.js
  

删除公共部分，mode、entry、output等。保留自己的属性

  const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成HTML插件包
  const path = require('path');
  const base = require('./webpack.config.base.js')

  module.exports = {
      ...base,
      devtool: 'inline-source-map',
      devServer: {
          contentBase: './dist',
      },
      module: {
          rules: [
              ...base.module.rules, // 导入base的内容
              { 
                  test: /\.css$/i,
                  use: ['style-loader', 'css-loader'],
              },
          ],
      },
  };

• webpack.config.prod.js
  

同样删除用公有属性，保留独自的

  const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成HTML插件包
  const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 抽出CSS文件的包
  const path = require('path');
  const base = require('./webpack.config.base.js')

  module.exports = {
    ...base,
    module: {
      rules: [
          ...base.module.rules, // 导入base的内容
          {
          test: /\.css$/i,
          // 单独生成文件
          use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: '../',
                },
              },
              'css-loader',
            ],
          },
      ],
      },
    mode: 'production', // development——开发模式 production——发布模式
    plugins: [
      ...base.plugins,
      new MiniCssExtractPlugin({ // 抽出CSS文件的包
          filename: '[name].[contenthash].css',
          chunkFilename: '[id].[contenthash].css',
      })
      ]
  };

运行

// 开发
yarn start
// 生产
yarn build

七、安装SCSS

- 安装

yarn add sass-loader dart-sass --dev

- 配置

• 创建后缀改为scss的文件，并import到js中

• webpack.config.base.js 添加 rules 属性

  module: {
      rules: [
        {
          test: /\.scss$/i,
          use: [
            'style-loader',
            'css-loader',
            // 'sass-loader', // 这里我们不用他的，我们加载自己的dart-sass
            {
                loader: "sass-loader",
                options:{
                    implementation: require('dart-sass')
                }
            }
          ],
        },
      ],
    },

• 修改 webpack.config.js 和 webpack.config.prod.js 的rules，添加导入base的rules模块
  

  rules: [
              ...base.module.rules, // 导入base的内容
              { 
                  内容
              },
  ],

八、安装LESS

安装

yarn add less-loader --dev
yarn add less --dev

配置

• 创建后缀改为less的文件，并import到js中

• webpack.config.base.js 添加 rules 属性

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

九、安装Stylus

- 安装

• vscode的stylus语法插件 —— language-stylus

• 安装stylus插件

  yarn add stylus-loader stylus --dev

- 配置

• 创建后缀改为stylus的文件，并import到js中

• webpack.config.base.js 添加 rules 属性

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

十、引入图片

- 安装

yarn add file-loader --dev

- 配置

• 在js中import文件
  

  import png from '图片路径'

• webpack.config.base.js 添加 rules 属性
  

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

• 获取图片，例如
  

  import png from './assets/1.png' // 获取1.png的路径
  const div = document.getElementById('png') // 获取html中的标签
  // 将png插入到标签中
  div.innerHTML = ` 
  <img src="${png}">
  `

十一、查找资料关键字（google搜索）

文件缓存——webpack filename hash

自动生成HTML——webpack create html page

引入CSS——webpack css loader

安装webpack server——webpack dev server

抽出CSS文件——webpack css extract plugin

双模式切换（本文章使用了直白版和继承版） —— webpack config merge

安装scss —— webpack scss loader

安装less —— webpack less loader

安装stylus —— webpack stylus loader

引入图片 —— webpack image loader