搭建本地服务器的作用
本地服务器是一个基于node的服务器。我觉得没必要深究它是怎么实现的,只要知道他是什么作用就好。以往我们打包项目是打包到dist文件夹,将打包的内容存储到磁盘中,当我们调试项目的时候,从磁盘中读取文件。这样的话,很耗费时间。因为磁盘读取很耗费时间。而我们本地服务器,就可以把我们的项目打包放在内存中,而不是磁盘中。这样读取速度就上去了。当项目代码改变的时候,他会自动打包,打包到内存中。
搭建本地服务器的方法
首先他也是一个模块,首先安装。
npm install webpack-dev-server@2.9.1 --save-dev
第二步,配置它,同样是在webpack.config.js中配置。
- contentBase 监听的文件
- inline 是不是实时监听
使用本地服务器
在终端中,直接输入webpack-dev-server
,是不行的。因为他会从全局中找这个模块。而不会从局部中找这个模块。所以还是在package.json中配置scripts。
执行npm run dev
默认跑在8080端口上。点击链接即是我们的项目。
如果想要在打包后立即打开链接可以这样配置scripts.
"dev":"webpack-dev-server --open"
webpack.config.js配置文件的分离
为什么要分离配置文件
有一些配置是我们运行测试时需要的,比如说上文的derServer 有一些配置是我们要进行最终打包到磁盘中需要的,比如说压缩js代码。 所以我们要将他们进行一个分离,上述的两个过程也对应我们之前的两种指令
- aaa webpack 最终打包的时候执行
- dev webpack-dev-server 打包测试开发阶段执行
所我们把webpack.config.js一分为三
- base.config.js 基础共有的配置文件。
- dev.config.js 项目开发时特有的配置文件
- prod.config.js 项目最终打包时特有的配置文件
base.config.js:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"../dist"),
filename:"bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit:8192,
name:"img/[name].[hash:6].[ext]"
}
}
]
},
{
test: /\.vue$/,
use: [
'vue-loader'
]
}
]
},
plugins:[
new webpack.BannerPlugin("我是猪我是猪我是猪"),
new HtmlWebpackPlugin({
template:"./index.html"
})
],
resolve:{
extensions:['.vue','.js'],
alias:{
"vue$":"vue/dist/vue.esm.js"
}
},
}
prod.config.js :(将压缩js的plugin分离)
const uglifyjsplugin = require("uglifyjs-webpack-plugin");
const base = require("./base.config.js");
const webpackMerge = require("webpack-merge");
module.exports=webpackMerge({
plugins:[
new uglifyjsplugin()]
},base);
dev.config.js:(将配置本地服务器的配置分离)
const base = require("./base.config.js");
const webpackMerge = require("webpack-merge");
module.exports=webpackMerge({
devServer:{
contentBase:"./dist",
inline:true
}
},base);
在开发过程中,我们要将base.config.js+dev.config.js合并作为配置文件。而在打包上线的阶段我们需要base.config.js+prod.config.js合并作为配置文件。
怎么合并呢?
要通过一个模块:webpack-merge。安装模块。
npm install webpack-merge@4.1.5 --save-dev
dev.config.js和prod.config.js中导入模块:
const webpackMerge = require("webpack-merge");
使用webpackMerge将两个对象合并,然后导出。
打包遇到的问题1
进行打包:
npm run aaa
报错,显示找不到webpack的配置项,并且它的名字应该叫webpack.config.js。那我们应该主动指定webpack的配置项是哪个文件,在哪里。怎么设置呢?
在后面添加 --config + 配置文件相对路径
。
执行aaa的时候,实际上是最后打包上线的阶段。所以应该使用prod.config.js
执行dev的时候,实际是开发阶段,所以应该使用的配置文件时 dev.config.js
打包遇到的问题2
npm run aaa
解决问题一后,再进行打包,发现dist文件夹生成在build文件夹下,这是为什么呢?
因为设置出口的时候是通过__dirname
动态获取绝对路径的,最后再拼接dist。
而现在我们的__dirname
生成的绝对路径并不是指向我们的项目文件,而是指向项目文件的子文件夹build。最后再拼接dist肯定就生成在了 项目/build/dist 文件夹中了。如果想生成在 项目/dist 文件夹中,得返回上一级才行。
给文件起别名
起别名的好处
在webpack的配置中,可以给文件起别名。起别名有什么好处呢?我觉得有两个好处而且相当实用:
- 当引用时,文件路径写起来,特别繁琐的时候,可以利用文件别名,缩短文件路径长度
- 当你使用别名的时候,其实你基于别名编写的路径就是一个绝对路径!那么你把你的代码任意剪切,放到别的文件中,也不会出现代码中路径找不到的问题。
怎样起别名
在webpack的配置中,文件路径的相关配置都在这个resolve对象中 resolve对象中的alias属性就是给文件起别名。 这里就是给src路径起了一个别名,@
使用别名
一般在两个场景使用别名:
- import '路径',这里的路径就可以使用别名:
import "@/index.js"
就是src下面的index.js文件
- 其他情况使用路径,比如说img的src属性。这些情况要使用路径的话,要使用别名的话前面得加~
<img src="~@/img.png"/>