共计 1798 个字符，预计需要花费 5 分钟才能阅读完成。
作者：心叶时间：2019 年 01 月 30 日 10:37
前要
由于 webpack 的配置具有实时性，之前搭建的 vue2 项目是基于 webpack2，因此，特地在此维护一篇关于 webpack4 搭建 vue2 项目的说明，会及时更新（github 地址：https://github.com/yelloxing/…）。
基础配置
npm install –save-dev vue vue-router
由于是搭建 vue2 项目，首先需要安装用到的 vue 和 vue 路由。
npm install –save-dev webpack webpack-cli
接着，安装 webpack，建立好空的 webpack.config.js，如下：
module.exports = {
entry: [‘./src/entry.js’],
output: {
path: __dirname,
filename: ‘build/main.js’
},
resolve: {
alias: {
‘vue’: ‘vue/dist/vue.js’
}
},
module: {
rules: []
}
};
上面的配置和 webpack2 的没有区别，这里不再赘述了（entry：打包入口，output：打包文件存放地址，resolve 的配置是因为 vue2 在开发和生成模式对象不统一）。
解析 vue2
npm install –save-dev vue-template-compiler vue-loader
首先安装 vue 模板解析器，接着，在 webpack.config.js 中配置一下：
…
rules: [{
test: /\.vue$/,
use: [‘vue-loader’]
}]
…
配置的时候，其实就是加上上面这二句代码。
到此为止，最简单的项目就搭建好了。
为了方便执行，在 package.json 中添加下面脚本：
“scripts”: {
“release”: “node_modules/.bin/webpack”
}
然后在命令行执行：
npm run release
搭建开发环境
上面的打包方式时候开发完毕以后，发布代码，如果是开发中，我们希望实时刷新。
首先安装服务器：
npm install –save-dev webpack-dev-server
接着在 webpack 中配置:
…
devServer: {
contentBase: ‘./’,
compress: true,
host: ‘localhost’,
port: ‘20000’,
hot: true,
inline: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module:
…
然后，在 package.json 中添加下面脚本：
“scripts”: {
“dev”:”node_modules/.bin/webpack-dev-server –open”,
“release”: “node_modules/.bin/webpack”
}
执行下面命令：
npm run dev
浏览器会自动打开：localhost:20000
完善 vue 配置
npm install –save-dev vue-style-loader css-loader
上面是添加项目中对 css 的解析器，再在 webpack.config.js 中添加如下配置，即可开发 css 代码：
{
test: /\.css$/,
use: [‘vue-style-loader’, ‘css-loader’]
}
添加对 scss 的支持
npm install –save-dev sass-loader node-sass
然后，添加下面配置：
{
test: /\.scss$/,
use: [“vue-style-loader”, “css-loader”, “sass-loader”]
}
添加对图片的支持
npm install –save-dev file-loader
然后，添加下面配置：
{
test: /\.(png|jpg|jpeg|gif|bmp)$/,
use: [‘file-loader?limit=7000&name=build/image/[name].[ext]’]
}
如果你使用的图片格式不被上面的 test 包含，需要手动额外添加即可。
后记
完整的代码维护在 github 中，会及时更新：https://github.com/yelloxing/…
希望对你学习 vue2 有所帮助 :)
