1⃣️、网页中引入的静态资源多了会有什么问题？
- 网页加载速度慢 会发起很多的二次请求
- 要处理错综复杂的依赖关系
1.1 解决方案
合并、压缩、精灵图、icon字体图标、图片的Base64编码...
使用requireJS、webpack解决各个包之间的复杂依赖关系...
2⃣️、什么是webpack？
Webpack是前端的一个项目构建工具，基于node开发出来的一个前端工具，把前端开发中用到的所有资源都变成浏览器可以识别的资源。
3⃣️、起步
- 安装webpack
sudo npm install webpack -g(全局安装) - 初始化项目
npm init -y - 新建webpack配置文件夹
webpack-demo
|- /dist
|- index.html
|- /src
|- index.js
|- package.json
+ |- webpack.config.js
- 编写webpack配置
// 导入路径模块
const path = require('path');
// 暴露出去
module.exports = {
// 打包入口 (表示webpack要打包的文件)
entry: './src/index.js',
// 打包出口 (打包至哪个文件)
output: {
// 打包后的文件名
filename: "bundle.js",
// 打包后的路径
path: path.resolve(__dirname, "dist")
}
};
- 执行打包命令 按照webpack.config.js文件中的配置打包
npx webpack --config webpack.config.js - 配置快速命令
在package.json文件夹中的scripts中配置一个键值对
"dev": "npx webpack --config webpack.config.js"
终端直接输入npm run dev即可打包 - 配置开发服务器 实时重新打包加载
下载
npm install --save-dev webpack-dev-server
修改webpack.config.js配置文件，告诉开发服务器(dev server)，在哪里查找文件
module.exports = {
...
+ // 开发服务器
+ devServer: {
+ // 网站根目录 类比与 apache www目录
+ contentBase: './dist'
+ },
}
- 打包css
下载
npm install --save-dev css-loader
配置规则
module.exports = {
...
module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [ 'style-loader', 'css-loader' ]
+ }
+ ]
}
}
- 打包less
下载
npm install --save-dev less-loader less
配置规则
module.exports = {
...
module: {
+ rules: [{
+ test: /\.less$/,
+ use: [{
+ loader: "style-loader"
+ }, {
+ loader: "css-loader"
+ }, {
+ loader: "less-loader"
+ }]
+ }]
}
};
- 打包Vue
下载
npm install -D vue-loader vue-template-compiler
配置
// 导入Vue编译
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
+ // 配置vue文件打包
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ }
]
},
+ plugins: [
+ // 请确保引入这个插件！
+ new VueLoaderPlugin()
]
}
- 启动项目
npm run serve
项目基本结构
GitDemo👉https://github.com/LanHai1/webpack-vue
