webpack简介与常用配置之插件

栏目: JavaScript · 发布时间: 5年前

内容简介:写在前面,近期有想法整理一下前端工程化相关的知识,就先从打包工具开始吧;今天带来的是webpack相关的一些常用插件配置,后期有时间话,也会出一些比较轻量级的打包工具的配置 gulp, rullup...相对于webpack学习成本更低一些CopyWebpackPlugin 能够实现将某些文件或文件夹进行拷贝安装

写在前面,近期有想法整理一下前端工程化相关的知识,就先从打包 工具 开始吧;今天带来的是webpack相关的一些常用插件配置,后期有时间话,也会出一些比较轻量级的打包工具的配置 gulp, rullup...相对于webpack学习成本更低一些

介绍

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle

概念

  • 入口
  • 输出
  • loader
  • 插件
  • 模式

配置文件

  • 项目根目录下创建 webpack.config.js

运行启动

  1. ./node_modules/.bin/webpack
  2. npx webpack
  3. 配置 npm 脚本

1.CopyWebpackPlugin (插件)

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

安装

npm install --save-dev copy-webpack-plugin
webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');

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

2.HtmlWebpackPlugin (插件)

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

安装

npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

3.CleanWebpackPlugin (插件)

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

安装

npm install --save-dev clean-webpack-plugin
webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');

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

4.ProgressPlugin (插件)

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

webpack.config.js
const { ProgressPlugin } = require('webpack');

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

5.DefinePlugin (插件)

DefinePlugin 能创建环境变量

webpack.config.js
const { DefinePlugin } = require('webpack');

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

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

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

// 开发

npx webpack --config webpack.config.js

// 生产

npx webpack --config webpack.config.prod.js
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(实时重新加载) 功能。

安装

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

使用

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

8.webpack-merge 模块

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

安装

npm install --save-dev webpack-merge

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

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

9.别名的配置

疼点:

src 下面目录结构庞大且复杂的时候,可能引入模块会出现 ../../../../../../ 这种形式

那一天对文件路径调整了一下。import 的路径也得跟着修改一下。

定义别名规则

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

最后,完整配置如下

webpack.config.base.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { ProgressPlugin } = require('webpack');

module.exports = {
  // 1. 入口
  entry: './src/index.js',
  // 2. 出口
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 3. loader 规则
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  },
  // 4. 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html')
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, './public'),
        to: path.resolve(__dirname, './dist')
      },
    ]),
    new CleanWebpackPlugin(),
    new ProgressPlugin(),
  ]
}

webpack.config.dev.js

const merge = require('webpack-merge');
    const { DefinePlugin } = require('webpack');
    const baseConfig = require('./webpack.config.base');
    
    module.exports = merge(baseConfig, {
      plugins: [
        new DefinePlugin({
          'process.env': {
            'NODE_ENV': '"development"'
          }
        })
      ],

  mode: 'development',
  devServer: {
    contentBase: '/dist',
  }
})

webpack.config.prod.js

const merge = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  plugins: [
    new DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    })
  ],
  mode: 'production'
})

script设置

"scripts": {
    "serve": "webpack-dev-server --open --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  },
  • 开发运行 npm run sreve
  • 构建上线运行 npm run build

以上所述就是小编给大家介绍的《webpack简介与常用配置之插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX环境高级编程(第3版)

UNIX环境高级编程(第3版)

史蒂文斯 (W.Richard Stevens)、拉戈 (Stephen A.Rago) / 戚正伟、张亚英、尤晋元 / 人民邮电出版社 / 2014-6-1 / 128.00元

《UNIX环境高级编程(第3版)》是被誉为UNIX编程“圣经”的Advanced Programming in the UNIX Environment一书的第3版。在本书第2版出版后的8年中,UNIX行业发生了巨大的变化,特别是影响UNIX编程接口的有关标准变化很大。本书在保持前一版风格的基础上,根据最新的标准对内容进行了修订和增补,反映了最新的技术发展。书中除了介绍UNIX文件和目录、标准I/......一起来看看 《UNIX环境高级编程(第3版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码