目前vue官方的脚手架工具似乎并没有支持webpack4.x的版本搭建vue项目，最近折腾了一下，做以下记录，以便下次翻阅
- 首先，新建一个空文件夹
mkdir demo
cd demo
- 进入到我们新建好的目录之后，在命令行工具中运行npm init，生成package.json文件
npm init
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
},
"devDependencies": {
}
}
- 安装我们需要的依赖, npm 命令或者yarn都可以
vue 与 vue-router这两个就不说了，vue必备的两件套，当然项目中还用到vuex，就一并加进去，搭建一个简单的webpack vue项目，刚开始我们只需要用到webpack的小四件套
yarn add webpack webpack-cli webpack-dev-server webpack-merge -D
yarn add vue vue-router
等待依赖安装完成，package.json会如下：
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.21",
"vue-router": "^3.0.2",
},
"devDependencies": {
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14", // webpack提供的小型服务器，可以热更新
"webpack-merge": "^4.2.1" // 合并webpack配置
}
}
安装完这些依赖之后，我们还要再装几个的包，运行如下命令
yarn add vue-loader vue-template-compiler -D
yarn add babel-loader @babel/core -D
yarn add url-loader -D
yarn add html-webpack-plugin -D # 该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。
这里需要解释一下的是，在webpack3.x的版本中，用的babel-core是6.x的版本，但是升级到webpack4.x之后，需要将依赖修改为@babel/core， 安装7.x或以上的版本就可以了
- 安装完所需要的依赖之后，进入到我们的项目中，按照以下项目布局新建目录和文件
.
├── build
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
├── src
│ ├── components
│ ├── App.vue
│ ├── main.js
├── src
├── index.html
├── package.json
.
- webpack的一些配置
// webpack.base.conf.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: {
app: './src/main.js' // 入口文件
},
output: {
path: path.resolve(__dirname, '../public'), // 输出目录
filename: "[name].[hash].entry.js"
},
module: { // 配置loader
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
},
]
},
plugins: [
new VueLoaderPlugin(), //
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html') // 模板文件
}),
// 解决vender后面的hash每次都改变
new webpack.HashedModuleIdsPlugin(),
new webpack.HotModuleReplacementPlugin(), // 热模块替换
],
resolve: {
extensions: ['.js', '.vue'], // 通过import 引入的模块可省略的后缀
alias: {
vue: 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
},
},
}
// webpack.dev.conf.js
const merge = require('webpack-merge');
const webpackBaseConf = require('./webpack.base.conf');
const path = require('path');
module.exports = merge(webpackBaseConf, {
devtool: 'inline-source-map',
devServer: { // webpack提供一个不需手动刷新页面，根据代码更新而自动刷新的web服务器，其他参数大可以在用到的时候查询一下。
contentBase: '../public',
port: 9000, // 端口
open: true, // 是否自动打开浏览器
hot: // 是否热加载 其他的参数
},
output: {
filename: 'js/[name].[hash].js',
path: path.resolve(__dirname, '../public'),
},
mode: 'development',
});
以上的devServer 或者其他诸如会区分环境的配置可根据vue官方脚手架工具生成的项目那样在config目录中配置，这里不多做介绍，webpack.prod.conf.js也不介绍，大家可根据自己在生产环境需求配置
- 以上配置之后，在scripts中新建一个运行脚本（dev）
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot --progress --colors --open --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.21",
"vue-router": "^3.0.2",
},
"devDependencies": {
"@babel/core": "^7.2.2",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"url-loader": "^1.1.2",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"
},
"peerDependencies": {
"vuex": "^3.0.1"
}
}
关于build的配置这里就暂时不介绍了，大家可以自行研究一下，还有扩展的less或者stylus等，都可以自己研究一下
网友评论