Webpack 打包工具
- 项目根下新建一个 webpack 的配置文件 webpack.config.js
- 添加 webpack 依赖的库
npm install webpack webpack-cli -D
- 在 package.json 中 配置 打包的命令
"scripts": {
"build": "webpack --config webpack.config.js"
}
- 执行打包命令、打包项目
npm run build
webpack 解析 JS
- 需要安装的 库
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install core-js@3
将 html 进行打包
- hmtl-webpack-plugin 库
npm install html-webpack-plugin -D
-
将模板 index.html 放到项目的 public 目录
-
配置 模板 插件
const HtmlWebpackPlguin = require("html-webpack-plugin")
module.exports = {
...
...
plugins: [
new HtmlWebpackPlguin({
template: path.resolve(__dirname, './public/index.html')
})
]
}
webpack 构建 vue项目
- 安装依赖库
npm install vue vue-template-compiler vue-loader -D
-
修改 index.html 模板、添加
<div id="app"></div>
-
在项目src目录下新建一个 App.vue 文件
<template>
<div id="app">
</div>
</template>
- 在项目的 src 目录下、新建一个 main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
// 渲染模板函数
render: h => h(App)
}).$mount("#app")
- 在 webpack.config.js 中 配置 vue-loader
const { VueLoaderPlugin } = require("vue-loader")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"]
}
]
}
....
plugins: [
new VueLoaderPlugin()
]
}
配置 css-loader 、解析 css
npm install style-loader css-loader less-loader less -D
{
test: /\.(css|less)$/,
// 多个 loader 的执行顺序是 从 右到左
use: ["style-loader", "css-loader", "less-loader"]
}
配置处理图片的 loader file-loader ,
- url-loader (可以将小图片设置为 dataUrl格式、不用在磁盘中进行存储)
npm install file-loader -D
{
test: /\.(jpe?g|png|gif)$/,
// 多个 loader 的执行顺序是 从 右到左
use: {
loader: "file-loader",
options: {
outputPath: 'images',
name: [name].[contenthash:6].[ext] ,
esModule: false
}
}
}
在 webpack中,搭建一个 开发服务器
- 需要安装依赖库
npm install webpack-dev-server@4.0.0-beta.2 -D
webpack-dev-server 最新版本 3.11.2 ,该版本依赖的 webpack-cli 只能用 3.X
解决方案
1. 降低 webpack-cli
2. 提升 webpack-dev-server 为4.0 测试版本
- 在 webpack.config.js 配置文件中,配置开发服务器
module.exports = {
...
devServer : {
host: 127.0.0.1 ,
port: 8080,
compress: true, // 可配
hot: true , // 支持热部署
}
}
- 配置 启动服务器的命令
"scripts": {
"serve": "webpack-dev-server --config webpack.config.js"
}
配置 resolve解析
resolve: {
// 配置别名
alias: {
'@': path.resolve(__dirname, "./src")
},
// ... 代表添加 默认支持的扩展名
extensions: ['.vue', "..."],
mainFiles: ['index'],
// 以 / 开头的静态资源 该从哪里去找
roots: [ path.resolve(__dirname, "./public") ] ,
},