一文入门 webpack4 ( 极力推荐!!! )
Vue3+版本与之前的版本有了很大的变化，少了很多有关
webpack的配置，这让我们关注与Vue的开发，不需要过多的关注webpack配置问题，然而webpack作为前端开发的利器，还是非常有必要掌握的。
WebPack主要概念：
A、入口：webpack从哪些文件开始构建依赖关系，比如main.js，other.js
B、打包结果：webpack需要将构建好的文件放入哪个位置，比如dist目录，bundle.js
C、加载器：webpack可以将哪些类型文件，加载需要通过加载器加载对应类型文件，放入依赖，打包，比如home.vue，main.css
D、插件：webpack通过固定插件来实现自身功能，比如index.html 的自动生成和压缩需要使用到插件html-webpack-plugin
E、模式：开发模式（开发过程中使用）、生成模式（项目部署），一般开发模式和生产模式都会有独立的配置文件，依赖通用配置文件
Npm项目初始化
npm init –y
(需要不在中文目录)
安装webpack
npm install webpack webpack-cli --save-dev
使用webpack打包js
安装axios
npm install xios –S
index.html 中引入最终会得到的包 main.js
<script src="main.js"type="text/javascript" charset="utf-8"></script>
在index.js中测试axios使用
// 测试axios
import axios from 'axios'
axios.get("https://yesno.wtf/api").then(res=>{
console.log(res.data);
})
使用npx webpack 打包index.js得到的main.js中既包含自己编写代码，又包含axios源码
同理可以打包 其他的js文件
Webpack的配置文件
const path = require('path');
module.exports = {
// 入口
entry:'./src/index.js',
// 打包结果
output: {
filename:'bundle.js',
path:path.resolve(__dirname, 'dist')
}
};
Npx webpack 可以使用该配置文件打包
注意配置文件名默认为webpack.config.js
创建npm指令
在package.json中script添加指令
"scripts": {
"test": "echo \"Error: no test specified\"&& exit 1",
"build":"webpack"
},
之后就可以使用 npm run build 编译打包
注意需要将index.html 中的引入的main.js内容换成 bundle.js
Webpack使用加载器加载对应资源
加载css
安装加载器
npm install --save-dev style-loader css-loader
配置加载器
在webpack.config.js 中rules中添加加载规则
{
// 加载文件类型
test:/\.css$/,
// 使用何种加载器
use: [
//加载器列表 按顺序从又向左
'style-loader',
'css-loader'
]
},
在src目录下新建assets/css/main.css文件
编写样式
* {
color: red;
}
在main.js引入样式
// 测试样式css加载
import './assets/css/main.css'
重新打包 npm run build 页面中文件变红
加载图片
安装加载器
npm install --save-dev file-loader
配置加载器
// 配置图片类型加载器
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
新建src/assets/image目录 放入head.png
在index.html中编写元素
<div></div>
在main.css中编写样式
.head{
width:100px;
height:100px;
background-image:url('./image/head.png');
}
重新编译 npm run build ，图片会被自动放入dist中，并且建立依赖关系，运行index.html即可看到图片
配置多个入口
在src文件夹新建other.js
将index.js中的内容复制到other.js
在index.js中编写测试输出
console.log(“index入口”);
修改配置的入口与出口内容
// 入口
entry:{
main:'./src/index.js',
other:'./src/other.js'
},
// 打包结果
output: {
// filename:'bundle.js',
filename:'[name].bundle.js',
path:path.resolve(__dirname, 'dist')
},
此时重新打吧会生成多个bundle.js 注意修改index.html中的引入需要重新编写
配置动态html
安装生成htm插件
npm install --save-dev html-webpack-plugin
配置插件 在webpack.config.js中修改配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
newHtmlWebpackPlugin({
title: '自动生成的html',
template: 'index.html',
inject: true
})
]
建立生成index.html的参考文件在项目根目录新建index .html作为参考
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title><%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
<divid="app">
vue
</div>
<divclass="head"></div>
<!--自动生成的bundle会被自动注入在下方 -->
</body>
</html>
Dist自动清理插件
安装插件
npm install clean-webpack-plugin --save-dev
配置插件
const { CleanWebpackPlugin }=require('clean-webpack-plugin');
//在plugins中添加配置
new CleanWebpackPlugin(),
此时重新npm run build 则可以重新编译打包，并且清理dist内容
配置热更新
安装开发服务器
npm install --save-dev webpack-dev-server
修改配置文件
devServer: {
contentBase:'./dist'
},
添加一个 script 脚本
"serve": "webpack-dev-server --open",
配置生产环境与开发环境配置分离文件
在根目录新建config文件夹内创建配置文件
webpack.config.base.js、
webpack.config.dev.js、
webpack.config.prod.js
webpack.config.base.js 配置文件中编写通用配置
// 通用webpack配置参数
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} =require('clean-webpack-plugin');
module.exports = {
// 入口文件 将那个js文件作为包的入口文件
entry:{
main:'./src/index.js',
},
// 配置输出文件
output: {
// filename:'bundle.js',
filename:'[name].bundle.js',
path:path.resolve(__dirname, '../dist')
},
// 配置加载器
module: {
rules: [
{
// 加载文件类型
test:/\.css$/,
// 使用何种加载器
use: [
//加载器列表 按顺序加载
'style-loader',
'css-loader'
]
},
// 配置图片类型加载器
{
test:/\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
newHtmlWebpackPlugin({
title: '自动生成的html',
template: 'index.html',
inject: true
})
],
};
在webpack.config.dev.js编写开发配置
const merge = require('webpack-merge');
const base = require('./webpack.config.base.js');
// 将开发独有配置参数 与通用配置参数合并
module.exports = merge(base, {
entry:{
// other.就是是测试功能 仅在开发模式下需要
other:'./src/other.js'
},
devServer: {
contentBase:'./dist',
port: 8088,
open:true
},
});
在webpack.config.dev.js编写生产配置
const merge = require('webpack-merge');
const base = require('./webpack.config.base.js');
// 将生产独有配置参数 与通用配置参数合并
module.exports = merge(base, {
// 配置调试工具 资源映射 图 仅在生产模式下需要
devtool: 'eval',
});
修改npm配置，指定生产开发配置文件
"scripts": {
"test": "echo \"Error: no test specified\"&& exit 1",
"build": "webpack --configconfig/webpack.config.prod.js",
"serve":"webpack-dev-server --config config/webpack.config.dev.js"
},
Webpack搭建vue工程
安装Vue
npm install vue
安装vue文件加载器
vue-loader版本采用此处采用15.9.2
npm install vue-loader vue-template-compiler –S
配置vue加载器
{
test: /\.vue$/,
use: [
'vue-loader'
]
}
配置插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin(),
在main.js中编写vue实例
将index.js改名为main.js 作为Vue入口文件
在main.js同级目录新建App.vue
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:"#app",
render:h=>h(App)
})
重新打包编译即可
安装vue-router,vuex，之后使用流程略