不使用vue-cli来配置vue项目
之前都是用脚手架去进行配置vue项目,现在想手动配置vue项目。所以通过这个博客来记录一下自己的配置过程。
工具:
1. vscode
2. node
3. npm
步骤:
- 使用npm初始化项目
npm init//如果想省事可以使用下面的命令
npm init -y
- 安装基本的npm包
npm i vue vue-loader webpack webpack-cli --save-dev
- 按照下面的结构创建文件以及文件夹
+ src
- app.vue
- index.js
- index.html
- webpack.config.js
- 安装其它依赖
模板解析依赖
npm i vue-template-compiler --save-dev
样式依赖
npm i style-loader css-loader --save-dev
文件加载依赖
npm i file-loader --save-dev
解析es6语法依赖
npm i -d babel-loader @babel/core @babel/preset-env webpack
安装html-webpack-plugin插件,详细描述可以通过下面链接去查看
链接: html-webpack-plugin详解
npm i html-webpack-plugin --save-dev
- 配置webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: path.join(__dirname, './src/index.js'),
// 输出
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [{
// 使用vue-loader解析.vue文件
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 不处理这两个文件夹里的内容
loader: 'babel-loader'
},
{
test: /\.ts$/,
use: 'ts-loader'
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
] ,
},
]
},
resolve: {
// 解析模块请求的选项
// (不适用于对 loader 解析)
modules: [
'node_modules',
path.resolve(__dirname, 'app')
],
// 用于查找模块的目录
extensions: ['.js', '.json', '.jsx', '.css'],
// 使用的扩展名
alias: {
// 模块别名列表
'module': 'new-module',
// 起别名:"module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
'only-module$': 'new-module',
// 起别名 "only-module" -> "new-module",但不匹配 "only-module/path/file" -> "new-module/path/file"
'module': path.resolve(__dirname, 'app/third/module.js'),
// 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
// 模块别名相对于当前上下文导入
},
/* 可供选择的别名语法(点击展示) */
/* 高级解析选项(点击展示) */
},
devServer: {
host: '127.0.0.1',
port: '8899',
contentBase: path.join(__dirname, 'dist'), // boolean | string | array, static file location
compress: true, // enable gzip compression
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
// ...
},
mode: 'development',
// 插件
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html', // 生成的文件名称
template: 'index.html', // 指定用index.html做模版
inject: 'body' // 指定插入的<script>标签在body底部
})
]
}
- 安装热更新插件
npm i webpack-dev-server cross-env --save-dev
- 修改package中的命令,这里就用到上面安装的热更新插件
{
"presets": [
""@babel/preset-env""
],
"plugins": [
"transform-vue-jsx"
]
}
如果编译时报错的话,可能是因为你没有安装依赖:
npm i babel-plugin-syntax-jsx --save
npm i babel-preset-env --save
npm i babel-plugin-transform-vue-jsx --save
- 主要文件
- app.vue:
index.js:<template> <div>测试</div> </template> <script> export default { } </script> <style scoped> </style>
index.html:import Vue from 'vue'; import App from './App.vue'; new Vue({ render:h=>h(App) }).$mount('#app')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> </body> </html>
- 这样就配置完成了,可以运行了。