webpack手搭简易版vue
首先新建一个空的文件夹,执行如下命令:
npm init -y
这里小编偷懒选择自动生成, 接着生成我们的package.json文件,之后开始准备我们需要的插件;
webpack相关
npm install webpack webpack-cli --save-dev
css相关, 由于简单演示这里就直接用css了
css-loader
vue相关
npm install vue-loader vue-template-compiler --save-dev
npm install vue --save
接着就是我们的模板html插件
npm install html-webpack-plugin --save-dev
"author": "srTres",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"vue-loader": "^15.9.4",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.2.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.6.12"
}
之后新建一个webpack.config.js文件用于存放我们的配置
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
filename: 'boundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
loader: 'css-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
inline: true
}
}
mode的区分
选项 | 描述 |
---|---|
development | 会将process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin。 |
production | 会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. |
通常在项目里我们的代码都是在src下面的,这里我们也是新建src目录,以及打包后的目录dist
接着我们在src下面新建一个index.html文件作为我们的页面模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
新建一个index.js文件做为我们连接页面的入口,之后可以引入vue测试下效果能否实现;
import Vue from 'vue';
new Vue({
el: '#root',
data() {
return {
message: 'hello, webpack-vue'
}
}
template:·<div>{
{ message }}</div>·
})
这里就是我们比较熟悉的vue写法了,代码暂时到这里先告一段落,接下来该我们的打包上场了。
这里通过在我们的package.json的scripts中配置命令,scripts用来放置我们的脚本命令,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
这里暂时只需要配置build,dev命令是热更新,稍后我们会说,命令配置好之后,执行
npm run build
这时候我们先前的dist文件下会多出一个boundle.js跟index.html2个文件,这就是我们打包后的代码,
页面已经展示出我们的message了。
接下来就是新建一个App.vue文件
<template>
<div>
{
{
home }}
<button>点击</button>
</div>
</template>
<script>
export default {
data() {
return {
home: 'home old'
}
},
}
</script>
然后在我们的index.js文件中引入他
import Vue from 'vue';
import App from './app.vue';
console.log('1111')
new Vue({
el: '#root',
template: '<App />',
components: {
App
}
})
之后再去执行npm run build;
页面依旧能展示出来,到这里我们配置的vue文件已经可以正常使用,我们也可以像脚手架里一样去使用vue.
*
*关于webpack配置的简易vue到这里就结束了,感谢各位在百忙之中看到这篇文章的小伙伴