webpack

最新推荐文章于 2024-04-16 19:30:04 发布
原创 最新推荐文章于 2024-04-16 19:30:04 发布 · 240 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客详细介绍了Webpack的使用，包括安装、配置loader（如css-loader、style-loader、less-loader等）、配置vue相关、使用常见插件（BannerPlugin、HtmlWebpackPlugin、UglifyjsWebpackPlugin）以及设置本地服务器和配置文件抽离。通过实例展示了如何进行模块打包和优化。

文章目录

指令集合

新项目命令
cnpm init 初始化，生成package.json
cnpm install 若package.json 需要依赖其他包 则需要cnpm install
cnpm install webpack@3.6.0 --save-dev 安装本地webpack
cnpm install --save-dev css-loader
cnpm install style-loader --save-dev
cnpm install --save-dev less-loader less
cnpm install --save-dev url-loader
cnpm install --save-dev file-loader
cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015
cnpm install vue --save //安装vue
cnpm install --save-dev vue-loader vue-template-compiler
在package.json中 将vue-loader 改为 “vue-loader”: “^13.0.0”,
然后 cnpm install 重新安装一下

notes:

将webpack 命令 与 npm run build 映射起来
webpack 命令可以替换成 npm run build 见package.json，详细配置 第8行，如下
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build” : “webpack” //一旦这样配置，会默认优先使用本地webpack，本地找不到会找全局的
},

Webpack 的使用

1, 使用webpack 的loader

需要哪些 loader可以在 https://www.webpackjs.com 查到，中文文档–LOADERS–样式

css-loader 只负责将css文件进行加载
styler-loader 只负责将样式加载到DOM,文件中

css

在main.js中依赖对应css文件 require("./css/normal.css") //这个是自己的css文件
安装cssloader,styler loader，
cnpm install --save-dev css-loader
cnpm install style-loader --save-dev
在webpack.config.js文件中进行配置 （配置见最后的配置文件）

less
1, 在main.js中依赖对应css文件 require("./css/special.less")
安装依赖
cnpm install --save-dev less-loader less

图片问题
cnpm install --save-dev url-loader
为了加载更大的文件，超过limit限制的文件
需要使用fileLoader 进行加载
cnpm install --save-dev file-loader

​ ES6 转成 ES5
​ 使用babel
​ 首先安装
​ cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2，webpack配置vue相关的东西

cnpm install vue --save
main.js导入
import Vue from “vue”

cnpm install --save-dev vue-loader vue-template-compiler
在使用中可能还会报错，是vueloader版本的问题，14版本之后使用vue-loader需要安装插件
在package.json中 将vue-loader 改为 “vue-loader”: “^13.0.0”,

3，使用常见webpack插件

webpack 插件对webpack 现有功能进行各种的扩展，如，打包优化，文件压缩等等

3.1 为打包的文件添加版权声明的插件 BannerPlugin

1，webpack.config.js 中添加
const webpack = require(“webpack”);
2，module.exports = {
…,
plugins:[
new webpack.BannerPlugin(‘最终版权归波儿霸和霸儿波所有’)
]
}

3.2 将html文件一块打包到dist文件夹中，直接发布的插件 HtmlWebpackPlugin

自动生成一个index.html文件，将打包的js文件，自动通过script标签插入到body中去

1，cnpm install html-webpack-plugin --save-dev
2，webpack.config.js 中添加
const htmlWebpackPlugin = require(“html-webpack-plugin”);
3，module.exports = {
…,
plugins:[
…
new htmlWebpackPlugin({
template : “index.html” //根据index.html文件生成
})
]
}

3.3 对打包的js文件进行压缩的插件 uglifyjs-webpack-plugin

1，cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2，webpack.config.js 中添加
3，module.exports = {
…,
plugins:[
…
new UglifyjsWebpackPlugin()
]
}

4，webpack安装本地服务器

非常方便，直接修改发布前代码，浏览器会做出相应改变。改变在内存中，最后只用发布一次就行了

1，安装
cnpm install webpack-dev-server@2.9.3 --save-dev
2，配置：
webpack.config.js 中
…
plugins:{…},
devServer:{
contentBase: “./dist”, //服务的目录
inline:true, //页面实施刷新
port:9999 //端口号
}
3，运行
package.json 中
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack”,
“dev”: “webpack-dev-server”
},
npm run dev

5，对配置文件进行抽离

有些东西，开发时需要，而发布时不需要，有些则反之
开发时需要build/base.config.js 和 build/dev.config.js
生产时需要build/base.config.js 和 build/prod.config.js

使用：
1，cnpm install webpack webpack-merge --save-dev
2，将东西进行分离
3，package.json 中 修改成
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack --config ./build/prod.config.js”,
“dev”: “webpack-dev-server --open --config ./build/dev.config.js”
}
4，base.config.js文件中,修改path
module.exports = {
…
output: { //配置出口
path: path.resolve(__dirname, “…/dist”), //_dirname 表示当前目录
filename: “bundle.js”,
},

注意：

当使用npm run dev的时候使用的开发环境，

当使用npm run build的时候使用的是生产环境

配置文件

webpack.config.js

const path = require("path"); // 
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
	entry: "./src/main.js", //配置入口
	output: { //配置出口
		path: path.resolve(__dirname, "dist"), //_dirname 表示当前目录
		filename: "bundle.js",
		// publicPath: "dist/" //设置发布路径
	},
	module: {
		rules: [{
				test: /\.(less|css)$/,
				//使用多个loader时,是从右向左
				use: [{
						loader: "style-loader" // creates style nodes from JS strings
					},
					{
						loader: "css-loader" // translates CSS into CommonJS
					}, {
						loader: "less-loader" // compiles Less to CSS
					}
				]
			}, {
				test: /\.(png|jpg|gif)$/,
				use: [{
					loader: 'url-loader',
					options: {
						limit: 1024 * 10,
						name: "img/[name].[hash:8].[ext]", //加载出来的图片所在dist中的位置
						//name代表原文件名,ext代表原扩展名
					}
				}]
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			},
			{
				test:/\.vue$/,
				use: {
					loader: 'vue-loader'
				}
			}
		]
		
	},
	resolve:{
		alias:{
			'vue$':'vue/dist/vue.esm.js'
		}
	},
	plugins:[
		new webpack.BannerPlugin('最终版权归波儿霸和霸儿波所有'),
		new htmlWebpackPlugin({
			template : "index.html"
		}),
		new UglifyjsWebpackPlugin()
	],
	devServer:{
		contentBase: "./dist",
		inline:true, //页面实施刷新
		port:9999
	} 
}

抽离后

base.config.js

const path = require("path"); // 
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
	entry: "./src/main.js", //配置入口
	output: { //配置出口
		path: path.resolve(__dirname, "../dist"), //_dirname 表示当前目录
		filename: "bundle.js",
		// publicPath: "dist/" //设置发布路径
	},
	module: {
		rules: [{
				test: /\.(less|css)$/,
				//使用多个loader时,是从右向左
				use: [{
						loader: "style-loader" // creates style nodes from JS strings
					},
					{
						loader: "css-loader" // translates CSS into CommonJS
					}, {
						loader: "less-loader" // compiles Less to CSS
					}
				]
			}, {
				test: /\.(png|jpg|gif)$/,
				use: [{
					loader: 'url-loader',
					options: {
						limit: 1024 * 10,
						name: "img/[name].[hash:8].[ext]", //加载出来的图片所在dist中的位置
						//name代表原文件名,ext代表原扩展名
					}
				}]
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			},
			{
				test:/\.vue$/,
				use: {
					loader: 'vue-loader'
				}
			}
		]
	},
	resolve:{
		alias:{
			'vue$':'vue/dist/vue.esm.js'
		}
	},
	plugins:[
		new webpack.BannerPlugin('最终版权归波儿霸和霸儿波所有'),
		new htmlWebpackPlugin({
			template : "index.html"
		}),
	]
}

dev.config.js

//开发时依赖需要这些东西
const WebpackMerge = require("webpack-merge")
const baseConfig = require('./base.config.js')
module.exports = new WebpackMerge(baseConfig, {
	devServer:{
		contentBase: "./dist",
		inline:true, //页面实施刷新
		port:9999
	} 
})

prod.config.js

//生产时需要的
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
const WebpackMerge = require("webpack-merge")
const baseConfig = require('./base.config.js')
module.exports = new WebpackMerge(baseConfig, {
	plugins:[
		new UglifyjsWebpackPlugin()
	]
})
(精华2020年5月12日更新) vue教程篇 webpack配置详解
一点一滴
05-10 1万+
package.json的启动 "scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" } 基本共用配置文件webpack.common.js var webpack = require('webpack'); var path = r
六.webpack的实战技巧
小毛驴的博客
05-08 721
1.打包后如何调试 我们使用了webpack后，所以代码都打包到了一起，给调试带来了麻烦，但是webpack已经为我们充分考虑好了这点，它支持生产Source Maps来方便我们的调试。 在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。 在配置devtool...
webpack由浅入深——（webpack基础配置）
weixin_33786077的博客
10-19 270
webpack的作用 构建就是把源代码转换成发布到线上的可执行JavaScrip、CSS、HTML代码，包括如下内容： 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 代码分割：提...
项目中webpack配置
imkaifan的博客
09-13 494
package.json { "name": "mingyoutang", "version": "1.0.1", "description": "mingyoutang", "main": "index.js", "scripts": { "dev": "webpack serve --config build/webpack.dev.js --inline --progress", "start": "webpack serve --mode=production .
看完这篇还搞不懂webpack，求你打我
高先生的猫
07-18 803
一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 二、webpack核心概念 1、Entry（
小红书 webpack 扣
09-27
在现代前端开发中，Webpack已成为构建模块化网站和应用不可或缺的工具。Webpack的核心功能是打包资源，它可以将各种静态资源，如JavaScript、CSS、图片等，进行模块化处理和打包，最终输出浏览器可以直接加载的静态...
精选资源
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
Webpack视频教程(webpack从入门到精通).zip
最新发布
07-08
02-webpack从入门到精通-webpack简介.mp4 03-webpack从入门到精通-webpack五个核心概念.mp4 04-webpack从入门到精通-webpack的初体验.mp4 05- webpack从入门到精通-打包样式资源.mp4 06- webpack从入门到精通-打包...
精选资源
若依vue3,基于webpack(非vite版本)
01-02
2. **Webpack**: Webpack的核心概念是模块化，它通过配置文件（webpack.config.js）来定义如何处理不同类型的文件。Webpack的主要任务包括：模块解析、加载、编译和打包。它支持预处理器（如Sass/LESS for CSS）和后...
vue.config.js 配置webpack打包
fankse的博客
07-28 1049
背景：项目之前配置的打包文件太多，体积太大，需要给他进行优化 代码如下： const webpack = require('webpack') const time = Date.now() const path = require('path') // gzip压缩插件 const CompressionWebpackPlugin = require('compression-webpack-plugin') // 代码打包之后取出console.log压缩代码 const TerserPlugin
Vue.js学习系列四——Webpack打包工具的使用（装修中……）
热门推荐
大灰狼的小绵羊哥哥的博客
02-07 1万+
这两周一直想写webpack的知识点，却发现webpack其实要说的很具体内容挺多的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点，所以本文中不再去重复别人的东西了，就简单记录一下我对webpack的理解。并按照老规矩附上demo以及我收藏的几篇不错的webpack入门文章以供学习参考~ 一、什么是webpack 1. webpack是虾米？ web
学习之webpack原理解析与实现一个简单的webpack
那一日面朝大海的博客
04-15 736
一、简介 本文主要讲述的是webpack的工作原理，及其打包流程，一步步分析其打包过程，然后模拟实现一个简单的webpack，主要是为了更深刻地了解其打包流程，为了充分体现其山寨的意义，故名称定为web-pack。 二、webpack的一些特点 webpack的配置文件是一个.js文件，其采用的是node语法，主要是导出一个配置对象，并且其采用commonjs2规范进行导出，即以module.exports={}的方式导出配置对象，之所以采用这种方式是为了方便解析配置文件对象，webpack会找到配置
webpack基本使用01
weixin_56882342的博客
11-05 160
webpack基本使用01webpack的配置webpack的安装功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 webpack的配置 webpack是一个打包工具，不用再在意各个js文件的命名冲突问题，因为webpack内部给我
入门Webpack
yshir
05-20 211
// 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js", //已多次提及的唯一.
webpack高级配置
gogo2027的博客
11-15 458
举个例子首先 webpack.config.js配置/**在固定 a.js 用esm导出，b.js用commonjs导出不变动};};webpack的本质是把多个js模块合并到一个js中，即一个入口得到一个输出js文件（bundle.js）。但是导致的问题是，如果这个bundle.js文件很大，那么浏览器请求的时候，导致请求时间很长，首屏长时间白屏。所以优化手段就是把bundle.js文件拆分成多个小的js文件，同时请求，首屏当然就更快渲染显示。
webpack高级
摇摆小仙的博客
10-25 269
1. HTML中img标签的图片资源处理 读取html中所有img的路径,帮我们把路径作统一的进行转换,处理并且把对应的资源打包 把html中所有的img对应的路径打包 安装npm intall -S html-withimg-loader 在webpack.config.js文件中添加loader { test: /\.(htm|html)$/i, loader: 'html-wi...
帮你学会webpack
2401_84091663的博客
04-16 407
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取});Tree Shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值