webpack常用插件及配置

webpack

前端自动化构建工具（打包工具）

使用步骤

1. 项目初始化 npm init -y
2. 安装项目的依赖 npm install --save-dev webpack webpack-cli
3. 项目根目录下创建一个 webpack.config.js 文件，就是webpack一个配置文件

const path = require('path');

module.exports = {
  // 1. 入口
  entry: './src/index.js',

  // 2. 出口
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },

  // 3. loader 规则
  module: {
    rules: []
  },

  // 4. 插件
  plugins: [

  ],

  // 5. 模式
  mode: 'development' // 打包的模式
}

• mode 模式 （开发模式、生产模式）
• entry 入口js文件
• output 出口
• module 模块
• plugins 插件

4. 开始打包，webpack

• ./node_modules/.bin/webpack
• npx webpack (npm5.x 之后支持的一个命令)
• 配置 package.json 的 npm 脚本

"dev": "webpack"

常用插件

1.CopyWebpackPlugin (插件)

CopyWebpackPlugin 能够实现将某些文件或文件夹进行拷贝。

1.安装

npm install --save-dev copy-webpack-plugin

2.配置webpack.config.js

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'source', to: 'dist' },
    ]),
  ],
};

2. HtmlWebpackPlugin(插件)

HtmlWebpackPlugin 简化了html的创建，以便为你的webpack包提供服务。

1.安装

npm install --save-dev html-webpack-plugin

2.配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ],
};

3. CleanWebpackPlugin (插件)

CleanWebpackPlugin 能帮忙每次打包之前先删除dist文件夹。

1.安装

npm install --save-dev clean-webpack-plugin

2.配置webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}

4. ProgressPlugin (插件)

ProgressPlugin 提供了一种自定义编译期间如何报告进度的方法。

1.配置webpack.config.js

const { ProgressPlugin } = require('webpack');

module.exports = {
  plugins: [
    new ProgressPlugin()
  ]
}

5. DefinePlugin (插件)

DefinePlugin 能创建环境变量

1.配置webpack.config.js

const { DefinePlugin } = require('webpack');

module.exports = {
  plugins: [
    new DefinePlugin()
  ]
}

6. 开发与生产时的不同配置

1.cli 时使用 --config 选项设置不同的配置文件

// 开发
npx webpack --config webpack.config.js

// 生产
npx webpack --config webpack.config.prod.js

2.npm script 时

"scripts": {
  "dev": "webpack --config webpack.config.js",
  "build": "webpack --config webpac.config.prod.js"
},

7.webpack-dev-server

webpack-dev-server 能够为我们提供一个简单的 web server, 并且具有live reloading(实时重新加载) 功能。

1.安装

npm install --save-dev webpack-dev-server

2.使用

开发时，将 webpack 命令修改为 webpack-dev-server 命令。

8.webpack-merge 模块

通过 webpack-merge 可以抽取出 开发与生产环境的相同的webapck配置。

1.安装

npm install --save-dev webpack-merge

2.写一个 webpack.config.base.js 。并在这个文件中写入基本的webpack配置

3.在 webpack.config.dev.js 与 webpack.config.prod.js 中引入 webpack.config.base.js 然后使用 webpack-merge 进行重写或合并的操作

9.别名的配置

1.烦点：

• src 下面目录结构庞大且复杂的时候，可能引入模块会出现 ../../../../../../ 这种形式
• 哪一天对文件路径调整了一下。import 的路径也得跟着修改一下。
  2.定义别名规则

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}