摘要:安装插件能帮忙每次打包之前先删除文件夹。安装插件提供了一种自定义编译期间如何报告进度的方法。插件能创建环境变量开发与生产时的不同配置时使用选项设置不同的配置文件开发生产能够为我们提供一个简单的并且具有实时重新加载功能。
写在前面,近期有想法整理一下前端工程化相关的知识,就先从打包工具开始吧;今天带来的是webpack相关的一些常用插件配置,后期有时间话,也会出一些比较轻量级的打包工具的配置 gulp, rullup...相对于webpack学习成本更低一些
介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle 概念入口
输出
loader
插件
模式
配置文件项目根目录下创建 webpack.config.js
运行启动./node_modules/.bin/webpack
npx webpack
配置 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
</>复制代码
"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 命令。
通过 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"
})
package.josn 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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103951.html
摘要:去做想做的事,去爱值得的人去成为自己喜欢的模样,去让自己发光浑身充满力量,充实的日子最美好各位早安,这里是平头哥联盟,我是首席填坑官苏南,用心分享一起成长做有温度的攻城狮。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件、也...
摘要:作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本,的简称。的包管理工具,用于同一管理我们前端项目中需要用到的包插件工具命令等,便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通...
摘要:使用开发插件的好处本次开发的插件是抓取配置插件,有很多的表单以及弹出层,如果纯使用的话会有很多动态创建的操作。使用和的语法以及的加载器相配合,可以减少大量动态创建的代码。 使用vue开发chrome插件的好处 本次开发的插件是抓取配置插件,有很多的form表单以及弹出层,如果纯使用js的话会有很多动态创建dom的操作。使用vue和ES6的import语法以及webpack的html加载...
摘要:系列之及简单的使用一有什么用是核心功能,通过插件可以实现所不能完成的复杂功能,使用丰富的自定义,可以控制编译流程的每个环节,实现对的自定义功能扩展。三使用在配置文件中,向属性传入实例即可。 webpack系列之plugin及简单的使用 一.plugin有什么用 plugin是webpack核心功能,通过plugin(插件)webpack可以实现loader所不能完成的复杂功能,使用p...
阅读 2172·2021-11-24 10:34
阅读 3141·2021-11-22 11:58
阅读 3760·2021-09-28 09:35
阅读 1774·2019-08-30 15:53
阅读 2855·2019-08-30 14:11
阅读 1599·2019-08-29 17:31
阅读 591·2019-08-26 13:53
阅读 2187·2019-08-26 13:45