跟着慕课网的Jokcy老师做了一个todo项目，其实详细描述了webpack+vue的环境搭建。大概由于版本问题，遇到了一些课程中没显示出的error，通过上网搜索查出了解决方式。用这篇文章完整记录下自己的配置过程，以便后续参考。
vuscode插件
视频开头推荐下载这些插件，便于vscode的编程。打算之后出一篇文章查询记录一下这些插件的功能。（我先都安装了）
接下来是正式配置流程：
（1）初始化项目：
操作：使用ctrl+‘·’打开命令行，输入npm init，选项皆默认
结果：初始化成一个npm项目，形成package.json文件
（2）安装需要的包：
操作：npm i webpack vue vue-loader（使用vue，需要安装vue-loader）
结果：
显示出警告：vue-loader需要安装css-loader作为第三方依赖
解决操作：npm i css-loader
这些warn不用理
（3）新建文件夹‘src’，作为源码放置的目录；在src下新建文件‘app.vue’；在app.vue组件中输入以下内容
app.vue
（4）要想办法，让app.vue组件在浏览器中运行、显示：
操作：新建文件‘webpack.config.js’
（webpack的作用：打包前端资源；要以js文件为入口，此处申明入口）
操作：在src文件夹下新建‘index.js’，作为入口文件。vue组件通过js入口文件，挂载到html页面中；
在index.js中实现挂载操作：
index.js 实现挂载 在html页面中展示vue组件的内容
在webpack.config.js中配置入口、出口，打包vue组件与入口js文件的内容，形成bundle.js文件：
webpack.config.js 使用webpack进行打包并生成打包文件
在package.json里面写一句脚本：
（指定config文件：--config webpack.config.js）
只有在此处用webpack，才会用项目中配置的webpack，而不是用全局的webpack（如果直接在命令行里面输入，则会调用全局的webpack。全局的webpack可能与我们使用的webpack版本不一样）
package.json
配置好了以后，在命令行中输入npm run build（进行打包）。会提示安装webpack-cli，安装后继续运行，有warning：
mode
错误原因：webpack4里面需要声明mode来判断是生产环境还是开发环境
解决办法：修改build：
"build": "webpack --mode=production --config webpack.config.js"依旧有错误：
这个报错说明需要配置loader
报错原因：原生webpack只支持js文件类型，在使用超出其理解范围的语法时，要配置必要的loader
配置必要的loader：
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
依然有错误：
提示webpack4配置需要包含VueLoaderPlugin
声明VueLoaderPlugin：
const VueLoaderPlugin = require('vue-loader/lib/plugin')然后在输出里面配置plugins：
plugins: [
new VueLoaderPlugin()
]
同时npm i vue-template-compiler
依然有错误：
没有安装style-loader
npm i style-loader再次npm run build，未报错，搞定！
看结果：生成了一个dist文件夹，下面有bundle.js文件，里面是经由webpack压缩的页面信息。
bundle.js 我生成的内容有点奇怪，不知道是不是版本问题
（5）webpack配置项目加载各种静态资源及css预处理器
前面都是用webpack来加载.vue文件，现在是用webpack打包各种静态资源还有图片、样式之类的。
样式代码的loader之前已经配置好了（style-loader、css-loader）
还需要配置图片：
{
// 图片有各种格式，会用到的都要列出来
test: /\.(gif|jpg|jpeg|png|svg)$/,
use:
{
// use中，loader可以配置选项。方法：使用对象去声明
loader: 'url-loader',
//使用options去声明，将其中的对象传给loader
options: {
// 限制开始转译的大小，小的图片则不用转译，减少HTTP请求
limit: 1024,
// 自定义转译的文件名称
// ext表示文件的扩展名
name: '[name]-moira.[ext]'
}
}
}
安装相应的loader：
npm i url-loader file-loader（url-loader依赖于file-loader）
配置、安装完毕loader时，就可以在js代码中直接import这些非js内容：
完成这样的文件夹创建：放置图片、样式
创建文件
在样式文件中写点东西：
body{
color: red;
background-image: url('../images/back.jpg')
}
在入口文件（index.js）中import进去：
import './assets/styles/test.css'
import './assets/images/back.jpg'
运行：
生成了指定格式的转译图片
接下来配置css与处理器：（stylus 可以使用模块化的方式去写css代码）
在webpack.config.js中配置loader：
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
// 用stylus处理完的，是css内容。要处理css内容，必须返回上一级，到HTML页面中找样式
// 所以需要以上两个loader
// webpack的内容就是一层一层往上扔的，所以可以多种loader进行搭配
'stylus-loader'
]
}
配置好以后安装所需loader：
npm i stylus stylus-loader
接下来就可以用styl文件写样式了：
在styles文件夹中创建test-stylus.styl文件，写一些样式（这里之前安装的stylus插件就有用了）：
body
font-size: 20px
可以看出，比css文件少了很多格式，更加方便了
写完之后，在入口文件中引入：
import './assets/styles/test-stylus.styl'
打包一下：npm run build 显示成功
（6）webpack-dev-server的配置和使用
webpack-dev-server专门用在开发环境（mode=development）
ps：生产环境（mode=production）
npm i webpack-dev-server
配置脚本："dev": "webpack-dev-server --mode=development --config webpack.config.js"
修改webpack的配置，来适应webpack-dev-server的开发模式：
//在全局加入编译目标：web平台（网站，跑在浏览器中）
target: 'web',
配置文件同时用在生产、开发环境，配置中需要进行判断。判断方法：在脚本中设置环境变量，进行标识。
npm i cross-env 作用：在不同平台，设置环境变量的方式不一样（如mac与windows）。使用cross-env，则可在不同平台执行同个语句来设置环境变量。
配置脚本：
"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"
判断环境变量：
// 判断process.env.NODE_ENV是否等于development，以此判断isDev是否为true
// 在启动脚本的时候设置的环境变量全部存于process.env这个对象里面
const isDev = process.env.NODE_ENV === 'development'
module.exports
把module.exports改为const config，然后再加上：
module.exports = config
原因：要使用判断，需要用const
if (isDev) {
// 在config上加一个devServer配置
config.devServer= {
// 启动的服务端口
port: 8000,
// 通过localhost或IP进行访问
host: '0.0.0.0',
// 若编译过程中有错误，显示到网页上,便于定位错误
overlay: {
errors: true,
},
//热加载
hot: true
}
}
接下来，我们需要在编译结果的文件夹中加一个HTML文件来容纳js文件。
安装所需插件（使用webpack形成html文件）：
npm i html-webpack-plugin
引入：
// 引入webpack的形成html插件
const HTMLPlugin = require('html-webpack-plugin')
使用（在webpack全局中配置）：
plugins: [
// 使用vue框架时，一定要用以下这个webpack的plugin
// 在里面定义一个变量
// 作用：可以在全局调用变量来判断环境，变量为：process.env.NODE_ENV 返回结果为"development" or "production"(双引号不可省略)
// 这里调用了webpack插件，所以需要引入一下
new webpack.DefinePlugin({
'process.env': {
// 判断是否isDev，若是，则为development；若不是，则为production
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin()
]
// 引入webpack
const webpack = require('webpack')
配置完毕，使用npm run dev运行，进入页面，成功显示vue组件的内容。
说明webpack-dev-server已经成功启用了页面。
下面介绍一些webpack-dev-server的其他功能：
if (isDev) {
// 在config上加一个devServer配置
config.devSever = {
// 启动的服务端口
port: 8000,
// 通过localhost或IP进行访问
host: '0.0.0.0',
// 若编译过程中有错误，显示到网页上,便于定位错误
overlay: {
errors: true,
},
//热加载，功能：只渲染所改组件的页面效果，不会全部刷新，其他页面数据依然会存在
hot: true,
// 运行时自动打开页面，但修改时会总是打开，不太好，所以看具体业务需要
// open: true
// 单页应用会做很多前端路由，请求进来的地址不一定是index.html。
// historyFallback能将所有没有做映射的地址都映射到一个入口：index.html中去。
// 课程中只是提到这个功能，没有讲详细配置
// historyFallback: {
// }
},
// 加插件，push一个新的webpack plugin
//下面是不刷新更新内容
config.plugins.push(
// 启动热更新功能插件
new webpack.HotModuleReplacementPlugin(),
// 帮助减少不需要的信息展示
new webpack.NoEmitOnErrorsPlugin()
)
}
在webpack-dev-server上增加配置：
// 在config上加一个devtool配置
// 作用：在页面上调试代码，使用source-map映射编译代码
config.devtool = '#cheap-module-eval-source-map'
重启：npm run dev
成功展示页面，附带热更新功能：
访问网址为：localhost:8000
整个配置过程中参考的大佬地址：
- 慕课网Jokcy老师的vue+webpack打造todo应用课程；
- webpack4配置vue环境和一些小坑 ：https://blog.csdn.net/weixin_40814356/article/details/80625747
网友评论