目录
2、webpack.config.js和package.json的配置
(2)HtmlWebpackPlugin:打包html的插件
(3)uglifyjs-webpack-plugin:js压缩的插件
一、webpack的概念和安装
-->概念
本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
前端模块化打包工具
-->安装:
中文文档:https://webpack.docschina.org/concepts/
webpack本身依赖于node环境,
而node环境为了可以正常执行很多代码,其中包含很多依赖的包,所以一般在安装node时,会安装npm包管理工具(node packages manager)。
1、安装node
官方下载地址:https://nodejs.org/en/download/
历史版本:https://nodejs.org/en/download/releases/
我的电脑是win7的,不支持最新版本Node,这个版本的node支持win7 https://nodejs.org/dist/latest-v12.x/node-v12.20.1-x64.msi
2、npm安装webpack
配置npm的镜像(不然下载很慢很慢很慢)
常见的镜像:
淘宝npm镜像
- 搜索地址:http://npm.taobao.org/
- registry地址:http://registry.npm.taobao.org/
- 搜索地址:http://cnpmjs.org/
- registry地址:http://r.cnpmjs.org/
cmd命令:
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面命令来验证是否成功
npm config ls
// 此时:metrics-registry = "http://registry.npm.taobao.org/"表示设置成功
安装webpack
全局安装: npm install webpack@3.6.0 -g
本地安装:npm install webpack@3.6.0 --save-dev
![](https://i-blog.csdnimg.cn/blog_migrate/0f573a25187fd3bd0e5f6f079a2dec88.png)
二、webpack的使用
1、基本使用
处理前的js文件
mathUtils.js
function add(n1, n2) {
return n1 + n2;
}
function mul(n1, n2) {
return n1 * n2;
}
export {mul,add}
main.js
import {add,mul} from "./mathUtils";
console.log(add(1,98));
执行打包处理:
webpack 要处理的js文件 处理之后的文件
然后在html引用打包后的js文件
<script src="dist/bundle.js"></script>
2、webpack.config.js和package.json的配置
npm初始化,生成一个package.json
npm init
{
"name": "02webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
然后配置webpack.config.js文件
const path = require('path')
module.exports={
//入口
entry:'./src/main.js',
//出口
output:{
//动态的获取路径
path:path.resolve(__dirname,'dist'),
filename:'bundle.js',
},
}
文件结构如下
然后输入webpack命令,就可以直接打包了。
或者,在package.json中定义
就可以使用npm run build进行执行命令,并且执行的webpack优先在本地找并允许(因为项目和项目的webpack版本可能不一样,所以优先使用本地的可能好一点)
3、webpack中使用css的配置
使用参考文档:https://www.webpackjs.com/loaders/css-loader/
(1)安装css的loader和style的loader
npm install --save-dev css-loader
npm install style-loader --save-dev
然后在webpack.config.js中的exports中添加
module:{
rules: [
{
test: /\.css$/,
use: [
//使用多个loader时,是从右往左读取的
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
![](https://i-blog.csdnimg.cn/blog_migrate/47b5c0ef27504f6d2c6f161b9749a761.png)
这个时候,package.json是这样的,注意,我们这里使用的是webpack3.6.0,因此css-loader版本应该使用2.0.2,版本太高也会报错。
{
"name": "demo",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"devDependencies": {
"css-loader": "^2.0.2",
"node-sass": "^5.0.0",
"style-loader": "^2.0.0"
},
"dependencies": {
"exports-loader": "^2.0.0"
}
}
(2)在main.js中引用css
import {add,mul} from "./js/mathUtils";
//依赖css文件
require('./css/nomal.css');
console.log(add(1,98));
(3)执行webpack命令进行打包
4、less文件的处理
special.less
@fontSize:50px;
@fontColor:orange;
body{
font-size: @fontSize;
color: @fontColor;
}
(1)安装less loader、less
使用参考文档:https://www.webpackjs.com/loaders/less-loader/
npm install --save-dev less-loader less
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
![](https://i-blog.csdnimg.cn/blog_migrate/01f0079412e289511db2eca0f192ee75.png)
(2)引用less文件
//依赖less文件 require('./css/special.less');
(3)webpack打包
5、图片文件的处理
对应文档:https://www.webpackjs.com/loaders/url-loader/
(1)安装url-loader
npm install --save-dev url-loader
![](https://i-blog.csdnimg.cn/blog_migrate/1f5894563fc635c7bf51383706c91d36.png)
webpack.config.js
注意调整limit的大小(限制图片的最大)
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//但加载的图片小于limit时,会将图片以base64字符串格式
//当加载的图片大于limit时,会使用file loader来进行加载,这个时候需要我们按照file loader
//npm install --save-dev file-loader
limit: 630000
}
}
]
}
大于limit时要写接下来的配置
npm install --save-dev file-loader
![]()
file-loader的版本 ![]()
webpack.config.js添加配置
(2)在css使用图片
body {
/*background-color: lightpink;*/
background: url("../pic/千姬.png");
}
(3)webpack
小于limit时
大于limit时
(4)解决图片命名问题
![](https://i-blog.csdnimg.cn/blog_migrate/531d1845a790917ad6d85e3be2995253.png)
6、ES6转ES5的babel
(1)安装babel
官方文档https://www.webpackjs.com/loaders/babel-loader/
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
7、引入vue
(1)安装vue
npm install vue --save
![](https://i-blog.csdnimg.cn/blog_migrate/211e0d5729f9942f05096f9283a02ed6.png)
//指定vue
resolve:{
//
alias:{
'vue$':'vue/dist/vue.esm.js',
}
}
(2)使用
import Vue from 'vue';
xxx.js
//引入vue
import Vue from 'vue';
const app = new Vue({
el:'#demo',
data:{
message:'webpack使Vue',
}
})
(3)webpack打包
8、代码集:
以上为止的项目代码
index.html
注意script的async设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="dist/bundle.js" async></script>
</head>
<body>
<div id="demo">
<h2>123</h2>
<h2>{{ message }}</h2>
</div>
</body>
</html>
webpack.config.js
const path = require('path')
module.exports = {
//入口
entry: './src/main.js',
//出口
output: {
//动态的获取路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/',
},
//使用多个loader时,是从右往左读取的
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
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时,会将图片以base64字符串格式
//当加载的图片大于limit时,会使用file loader来进行加载,这个时候需要我们按照file loader
//npm install --save-dev file-loader
limit: 63000,
name: 'pic/[name]_[hash:8].[ext]',
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
},
//指定vue
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js',
}
}
}
main.js
import {add, mul} from "./js/mathUtils";
//依赖css文件
require('./css/nomal.css');
//依赖less文件
require('./css/special.less');
//引入vue
import Vue from 'vue';
const app = new Vue({
el:'#demo',
data:{
message:'webpack使Vue',
},
})
package.json
{
"name": "test",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"devDependencies": {
"css-loader": "^2.0.2",
"file-loader": "^3.0.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^5.0.0",
"style-loader": "^2.0.0",
"url-loader": "^1.1.2",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"@babel/core": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@babel/preset-es2015": "^7.0.0-beta.53",
"babel-loader": "^8.0.0-beta.0",
"exports-loader": "^2.0.0",
"vue": "^2.6.12",
"webpack": "^5.20.0"
}
}
项目结构
9、Vue的el和template以及抽取
管理div时,不将html代码写到管理的容器中,而是写在template中,如下:
const app = new Vue({
el: '#demo',
template: `
<div>
<h2>123</h2>
<h2>{{ message }}</h2>
</div>
`,
data: {
message: 'webpack使Vue',
},
})
也是和之前的效果一致的,以此避免index.html频繁的修改。
el和template的区别:dom会将template里的代码“复制”到el管理的容器中;
(1)抽取
//引入vue
import Vue from 'vue';
const app = {
template: `
<div>
<h2>123</h2>
<h2>{{ message }}</h2>
<button @click="clickTest">clickTest</button>
</div>
`,
data() {
return {
message: 'webpack使Vue',
name: 'rocke',
}
},
methods: {
clickTest() {
console.log(this.name);
}
}
}
new Vue({
el: '#demo',
template:'<app></app>',
components:{
app
}
})
(2)再次抽取
app.js
export default {
template: `
<div>
<h2>123</h2>
<h2>{{ message }}</h2>
<button @click="clickTest">clickTest</button>
</div>
`,
data() {
return {
message: 'webpack使Vue',
name: 'rocke',
}
},
methods: {
clickTest() {
console.log(this.name);
}
}
}
main.js
import Vue from 'vue';
import App from './vue/app'
new Vue({
el: '#demo',
template:'<app></app>',
components:{
App
}
})
(3)最终抽取(.vue文件)
app.vue
<template>
<div>
<h2 class="title">123</h2>
<h2>{{ message }}</h2>
<button @click="clickTest">clickTest</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'webpack使Vue',
name: 'rocke',
}
},
methods: {
clickTest() {
console.log(this.name);
}
}
}
</script>
<style scoped>
.title{
color: green;
}
</style>
配置对应的loader:
npm install vue-loader vue-template-compiler --save-dev
![](https://i-blog.csdnimg.cn/blog_migrate/ac2ddd245255abb2d8bd431745f3d039.png)
webpack.config.js
{
test: /\.vue$/,
use: ['vue-loader'],
},
main.js
import App from './vue/app.vue'
new Vue({
el: '#demo',
template:'<app></app>',
components:{
App
}
})
10、Plugin的使用
- 通过npm安装需要使用的插件(有一些内置的插件不需要安装)
- 在webpack.config.js中配置插件
(1)Bannerplugin:添加版权的插件
属于自带插件
在webpack.config.js配置
const webpack = require('webpack')
//插件
plugins:[
new webpack.BannerPlugin('最终版权归rocke所有'),
],
(2)HtmlWebpackPlugin:打包html的插件
- 自动生成一index.html文件,可以指定模板来生成
- 将打包的js文件,自动通过script标签插入到body中
安装:
npm install html-webpack-plugin --save-dev
配置:
const HtmlWebpackPlugin = require('html-webpack-plugin')
//插件
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
})
],
效果:
(3)uglifyjs-webpack-plugin:js压缩的插件
开发阶段不建议开启这个压缩功能
安装:
npm install uglifyjs-webpack-plugin --save-dev
配置:
const Uglifyjs = require('uglifyjs-webpack-plugin')
效果:
11、webpack-dev-server搭建本地服务器
webpack提供了一个可选的本开发服务器,这个服务器是基于node.js搭建的,内部使用express框架,可以实现我们想让浏览器自动刷新显示我们修改后的结果。
安装:
npm install --save-dev webpack-dev-server
注意版本:webpack-dev-server3.11.x对应webpack-cli的3.x
配置:
webpack.config.js中和plugin、resolve同目录
//webpack-dev-server
devServer:{
//contentBase:指定要服务的文件夹,不写默认是根文件夹
contentBase:'./dist',
//inline:是否实时监听
inline:true,
//port:端口号 默认8080
port:8080,
//historyApiFallback:在SPA页面中,依赖HTML5的history模式
//historyApiFallback:
}
启动服务:
12、webpack配置文件的分离
将开发时的配置和项目打包运行时的配置分离开
配置文件的分离:
安装:
npm install webpack-merge --save-dev
配置分离
base.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口
entry: './src/main.js',
//出口
output: {
//动态的获取路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
//publicPath: 'dist/',
},
//使用多个loader时,是从右往左读取的
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
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时,会将图片以base64字符串格式
//当加载的图片大于limit时,会使用file loader来进行加载,这个时候需要我们按照file loader
//npm install --save-dev file-loader
limit: 63000,
name: 'pic/[name]_[hash:8].[ext]',
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader'],
},
]
},
//指定vue
resolve:{
extensions:['.js','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js',
}
},
//插件
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
}),
],
}
dev.config.js
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = WebpackMerge.merge(baseConfig, {
devServer: {
contentBase: './dist',
inline: true,
port: 8080,
}
})
prod.config.js
const webpack = require('webpack')
const Uglifyjs = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = WebpackMerge.merge(baseConfig, {
plugins: [
new webpack.BannerPlugin('最终版权归rocke所有'),
new Uglifyjs(),
],
})
使用配置文件:
这里的打包路径需要修改