webpack搭建项目 (01)

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",    //启动-浏览器打开-热加载
},