webpack安装及配置
1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件,最终生成浏览器可以识别的资源html.css图片,js
2.安装
win+r输入cmd 唤出系统控制面板 然后进入本地目录
首先在本地目录创建一个文件夹,例如mypack,然后cd /mupack,然后输入以下命令
cd /mypack
npm init -y
npm i webpack webpack-cli -D
3.配置
打开vscode将创建好的mypack文件夹添加进去,然后创建一个webpack.config.js文件在里面输入以下代码进行配置
const path = require('path')
module.exports ={//入口entry:'./src/main.js',//输出output:{//目录:当前目录,下的dist目录path:path.resolve(__dirname,'dist'),//打包好的文件名filename:'bundle.js'},
//模式mode:"production", //development 开发模式 production 产品模式//插件plugins:[new HtmlWebpackPlugin({})]
}
4.运行
在开发模式下运行,命令行输入npx webpack在产品模式下可以用npm run bulid 如果在package.json下配置了
"scripts":{
"serve":"webpack"
}
则可以使用npm run serve运行
5.插件
1、HotModuleReplacementPlugin
的热更新是依赖于 webpack -dev-server,另外是在打包文件更改时更新打包文件或者重新加载刷新整个页面,HRM是只更新修改的部分。
HotModuleReplacementPlugin是webpack模块自带的,所以♡webpack后,在插件配置项中直接使用即可。
const webpack = require('webpack')plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新插件]
2、html -webpack-plugin
生成html文件。将webpack中条目配置的相关入口大块和extract-text-webpack-plugin的css样式插入到该插件提供的模板或模板内容配置项指定的内容基础上生成一个html文件,具体插入方式是将样式链接插入到head元素中,脚本插入到head或者body中。
const htmlWebpackPlugin = require('html-webpack-plugin')plugins: [ newhtmlWebpackPlugin({ filename: 'index.html', template: path.join(__dirname, '/index.html'), minify: { // 压缩html文件 removeComments: true, // 移除html中的注释 collapseWhitespace: true, // 删除空白符与换行符 minifycss: true, // 压缩内联css }, inject: true, }),]
注入有四个选项值
true:默认值,script标签位于html文件的body底部
body:script标签置于html文件的body底部(同true)
head:script标签放在head标签内
false:不插入生成的js文件,只是单纯的生成一个html文件
多页应用打包
有时,我们的应用不一定是一个单页应用,或者一个多页应用,那么如何使用webpack进行打包呢。
const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: { index: './src/index.js', login: './src/login.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash:6].js', }, //... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', //打包后的文件名 }), new HtmlWebpackPlugin({ template: './public/login.html', filename: 'login.html', //打包后的文件名 }), ],}
如果需要配置多个HtmlWebpackPlugin,则文件名不可更改,否则生成的都是index.html。
但是有个问题,index.html和login.html会发现,都同时约会了index.f7d21a。js 和login.f7d21a。js,通常这不是我们想要的,我们希望index.html中止日期index.f7d21a。js,login.html只保留login.f7d21a。js。
HtmlWebpackPlugin提供了一个块的参数,可以接受一个数组,配置此参数唯一的插入数组中指定的js日期到html文件中。
module.exports = { //... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', //打包后的文件名 chunks: ['index'], }), new HtmlWebpackPlugin({ template: './public/login.html', filename: 'login.html', //打包后的文件名 chunks: ['login'], }), ],}
这样执行 npm run build,可以看到index.html中唯一约会了index的js文件,而login.html中也只有约会了login的js文件。
3、clean-webpack-plugin
clean-webpack-plugin用于在打包前清理上一次项目生成的捆绑文件,它会根据output.path自动清理文件夹;这个插件在生产环境用的频率非常高,因为生产环境经常会通过hash生成很多bundle文件,如果不进行清理的话每次都会生成新的,导致文件夹非常庞大。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, '/index.html'), }), new CleanWebpackPlugin(), // 所要清理的文件夹名称]
4.terser-webpack-plugin
terser-webpack-plugin主要用于js优化
//js优化
const TerserPlugin = require('terser-webpack-plugin')
module.exports ={//优化optimization:{minimize:true,minimizer:[new CssMinPlugin(),new TerserPlugin()]},}
5.css-minimizer-webpack-plugin
css-minimizer-webpack-plugin主要用于css优化
//css优化
const CssMinPlugin =require('css-minimizer-webpack-plugin')
module.exports ={//优化optimization:{minimize:true,minimizer:[new CssMinPlugin(),new TerserPlugin()]},}
6、迷你CSS提取插件mini-css-extract-plugin
将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap。只能用在webpack4中,
const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = //插件plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),new CleanWebpackPlugin(),new MinCssExtractPlugin({filename:'style-[hash:7].css'}),new VueLoaderPlugin()],
module:{rules:[{test:/\.vue$/i,use:['vue-loader']},{test:/.(png|jpg|jepg|gif|webp|ico)$/,use:[{loader:'url-loader',options:{limit:1024,name:'images/[name]-[hash:7].[ext]'}}]},{test:/\.css$/,use:[MinCssExtractPlugin.loader,"css-loader"]}]},
6.loader处理器
处理文件,默认支持js与json,
css-loader 处理css
style-loader 把css加载到style标签
file-loader 处理文件地址
url-loader 处理文件地址把小图片转为base64 省一次网络请求
7.本地服务器配置webpack-dev-server
安装插件 npm i webpack-dev-server -D
在package.json中
scripts:{"serve":"webpack.serve"}
在webpack.config.js中
//npm i webpack-dev-server -DdevServer:{proxy:{},//代理host:"localhost",//域名port:8080,//端口好hot:true,//热更新open:true,//自动打开浏览器},
8.设置别名
在webpack.config.js中
resolve:{"alias":{//设置src别名"@":path.resolve(__dirname,"src"),}},
webpack安装及配置相关推荐
- Webpack安装与配置
1. 安装NVM 官网:https://github.com/nvm-sh/nvm (1). 通过 curl 安装: curl -o- https://raw.githubusercontent.co ...
- webpack安装、配置
webpack官网概念: 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具.当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图( ...
- webpack安装和配置
首先需要安装node.js. http://blog.csdn.net/itpinpai/article/details/50396697 https://www.cnblogs.com/sloong ...
- webpack的使用、安装和配置打包的入口和出口
webpack的基本使用 在这里我使用VScode为编辑器讲解 隔行变色案例 第一步:创建项目空白文件,并在终端中运行npm init -y 命令.初始化包管理配置文件package.json 第二步 ...
- webpack 的基本使用—— 创建列表隔行变色项目||在项目中安装和配置 webpack
创建列表隔行变色项目 ① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index ...
- git 创建webpack项目_Webpack入门:从安装到配置
文档 webpack 用于编译 JavaScript 模块. 一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互. 这里以入门者的角度(中文)介绍 webpack 的常用 ...
- Webpack 2 视频教程 002 - NodeJS 安装与配置
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
- java-初识大前端Node.js、ES6、Npm、Babel、模块化规范、WebPack、Vue-element-admin本地安装问题及解决、Git安装及配置、uni-app
VS code安装 安装成功 配置自动补齐Emment Node.js node.js下载网址: http://nodejs.cn/ 安装成功! 概念 Node.js发布于2009年5月,由Ryan ...
最新文章
- Spring基础专题——第十章(基础注解编程——下)
- array_map与array_column之间的关系
- 四、数据挖掘中常见的挖掘模式
- (原创)C++11改进我们的程序之右值引用
- 智慧交通day04-特定目标车辆追踪03:siamese在目标跟踪中的应用-SiamFC(2016)
- 【Python】一种pyahocorasick库安装方法
- from __future__ import absolute_import的作用
- Python实现桌面程序:PyQt5 + QtDesigner -- 界面设计与逻辑编写
- php获取字段中的第几个数字_php提取字符串中的数字
- 云服务器带外管理-从IPMI到RedFish
- Openresty 安装luarocks
- 微信小程序官方示例文档免费下载文档
- MySQL之高级SQL语句
- Win10系统盘瘦身
- cubic算法优化_安卓cpu优化tcp拥塞算法cubic和reno怎么选择?
- 腾讯直播与 JAVA整合_JAVA对接腾讯云直播如何实现 JAVA对接腾讯云直播实现代码...
- 昆明机床:10 月正式实施10 转增5 可期
- 程序君带你畅聊发送短信验证码
- 超简单!!!搭建阿克曼ROS小车
- 软件用户体验感受杂谈