搭建项目环境
项目初始结构
App.vue
<template>
<div>
<h1>这是 app 组件</h1>
</div>
</template>
<script>
</script>
<style scoped>
</style>
index.html
<!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>
main.js
// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// App
import App from './App.vue'
// 导入router
import router from './router.js'
Vue.use(VueRouter)
var vm = new Vue({
el : '#app',
data : {},
// 注意：这里不要使用components注册组件，选择使用render函数
render : c => c(App),
router
})
router.js
import VueRouter from 'vue-router'
const router = new VueRouter({
routes : [
]
})
export default router
.bablerc
{
"presets":["env", "stage-0"],
"plugins":["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
package.json
{
"name": "webpack-study2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --port 9999 --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.3.1",
"mint-ui": "^2.2.13",
"vue": "^2.6.10",
"vue-router": "^3.0.6"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-component": "^1.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.0.0",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^2.0.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
webpack.config.js
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
// 导入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
}),
new VueLoaderPlugin(),
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//处理less文件的规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },//处理scss文件的规则
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' },// 处理图片的loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
{ test: /\.vue$/, use: 'vue-loader' },// 处理 vue 文件的loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },// 配置 Babel 来转换高级的ES语法
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
}
}
}
