# 新建一个空的webpack项目
mkdir webpack-vue-cli && cd webpack-vue-cli
npm init -y
touch webpack.config.js
@前端进阶之旅: 代码已经复制到剪贴板
# 创建一些基础的目录结构:
mkdir src && cd src
touch main.js && touch App.vue
mkdir assets && mkdir components && mkdir styles
cd ../
mkdir public && cd public
touch index.html
@前端进阶之旅: 代码已经复制到剪贴板
# 安装一些基本的依赖
# 1. 保证webpack的基本功能
cnpm i --save-dev webpack webpack-cli
@前端进阶之旅: 代码已经复制到剪贴板
配置入口和出口
webpack.config.js:
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
@前端进阶之旅: 代码已经复制到剪贴板
# 2. 配置html模版和清理dist的插件
cnpm i --save-dev html-webpack-plugin clean-webpack-plugin
@前端进阶之旅: 代码已经复制到剪贴板
const path = require('path')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
+ const