安装依赖
npm i -D webpack webpack-cli babel-loader @babel/core @babel/preset-env html-webpack-plugin vue-loader vue-template-compiler webpack-dev-server css-loader style-loader url-loader postcss-loade
文件说明
index.html // 模板文件（html-webpack-plugin）
main.js // 入口文件（babel-loader @babel/core @babel/preset-env es6语法）
webpack.config.js // webpack配置 （webpack webpack-cli webpack-dev-server css-loader style-loader url-loader postcss-loade）
App.vue // vue实例（vue-loader vue-template-compiler）
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>打工人打工魂</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack.config.js
const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development', // 指定开发者打包模式
entry: './src/idex.js', //入口文件
output: { filename: 'index.js', path: __dirname + '/dist' },
module: {
rules: [{
/*将js文件转码成es5*/
test: /\.js?$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }
},
{
test: /\.vue$/, use: [{
loader: 'vue-loader', options: {
compilerOptions: { preserveWhitespace: false },
}
}]
}]
},
plugins: [
new HtmlWebpackplugin({
filename: 'index.html', // 打包后的文件名，默认index.html
template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板 }),
}),
new VueLoaderPlugin()
]
}
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({ render: h => h(App) }).$mount('#app');
App.vue
<template>
<div id="app"></div>
</template>
<script>
export default {}
</script>
