1. npm init
项目初始化,生成package.json文件
2. webpack webpack-cli webpack-dev-server
npm --save-dev 安装webpack (4+版本依賴webpack-cli)
3. 文件结构
node_modules
src
- index.js
- index.html
package.json
webpack.config.js
4. webpack.config.js 配置1 (基础配置)
const path = require('path');
module.exports = () => {
return {
devServer: {
port: 8808, //端口
overlay: true, //将报错显示在html上
},
entry: { //入口
index: './src/index.js',
},
output: { //出口
path: path.resolve(__dirname, '/dist'), //出口路径
filename: 'bundle.js', //文件
publicPath: '/dist/', //公共路径--index.html的引用路径
},
resolve: {
alias: {
'vue': 'vue/dist/vue.esm.js', //快捷入口
},
},
};
}
5. package.json启动命令配置
"scripts": {
"start": "webpack-dev-server --open --hot", //启动-浏览器打开-热加载
},