webpack简介与常用配置之插件
栏目: JavaScript · 发布时间: 5年前
内容简介:写在前面,近期有想法整理一下前端工程化相关的知识,就先从打包工具开始吧;今天带来的是webpack相关的一些常用插件配置,后期有时间话,也会出一些比较轻量级的打包工具的配置 gulp, rullup...相对于webpack学习成本更低一些CopyWebpackPlugin 能够实现将某些文件或文件夹进行拷贝安装
写在前面,近期有想法整理一下前端工程化相关的知识,就先从打包 工具 开始吧;今天带来的是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 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简介与常用配置之插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
流畅的Python
[巴西] Luciano Ramalho / 安道、吴珂 / 人民邮电出版社 / 2017-5-15 / 139元
【技术大咖推荐】 “很荣幸担任这本优秀图书的技术审校。这本书能帮助很多中级Python程序员掌握这门语言,我也从中学到了相当多的知识!”——Alex Martelli,Python软件基金会成员 “对于想要扩充知识的中级和高级Python程序员来说,这本书是充满了实用编程技巧的宝藏。”——Daniel Greenfeld和Audrey Roy Greenfeld,Two Scoops ......一起来看看 《流畅的Python》 这本书的介绍吧!