Layabox2.4+webpack4.x打包构建编译、热更新

1. 在laya项目目录下新建package.json

点击查看代码

{
    "scripts": {
        "bundle:dev": "webpack --config webpack.config.debug.js --watch",
        "serve": "webpack serve --config webpack.config.debug.js"
    },
    "jest": {
        "testEnvironment": "node"
    },
    "devDependencies": {
        "@types/jest": "^26.0.20",
        "flatbuffers": "^1.12.0",
        "jest": "^26.6.3",
        "protobufjs": "^6.10.1",
        "raw-loader": "^4.0.1",
        "source-map-support": "^0.5.20",
        "ts-jest": "^26.5.3",
        "ts-loader": "^8.0.3",
        "tsconfig-paths-webpack-plugin": "^3.3.0",
        "tslint": "^6.1.3",
        "typescript": "^4.0.2",
        "webpack": "^4.44.1",
        "webpack-bundle-analyzer": "^3.8.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.11.1",
        "yaml-loader": "^0.6.0"
    },
    "dependencies": {
        "@types/flatbuffers": "^1.10.0",
        "inkjs": "^1.11.0"
    },
    "name": "diudiu",
    "version": "1.0.0",
    "main": "webpack.config.debug.js",
    "author": "",
    "license": "ISC",
    "description": ""
}

2. 在tsconfig.json设置

点击查看代码

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "noEmitHelpers": true,
    "sourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "node_modules"
  ]
}

3. 在项目根目录新建webpack.config.debug.js配置设置文件

点击查看代码

const path = require('path');

/** 忽略编辑的第三方库 */
const externals = {
};

module.exports = {
    entry: path.join(__dirname, 'src/Main.ts'),
    devtool: 'inline-source-map',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            { test: /\.fs$/, use: 'raw-loader' },
            { test: /\.vs$/, use: 'raw-loader' }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],

    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bin/js')
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'bin')//本地服务器所加载的页面所在的目录
        },
        historyApiFallback: true, //不跳转
        compress: true,
        hot:true,		//不设置热更新是要手动刷新才有效果
        port: '5000', //端口号
        open: true  // 启动打开浏览器
    },
    externals
};

4. 在项目根目录执行命令npm install安装所有库
5. 执行命令npm run bundle:dev编译项目，尝试一下修改项目代码然后按保存，看看是否会编译项目，会自动编译就对了。
6. 再执行npm run serve运行本地HTTP服务器。
7. 看到运行效果了，完美执行。如果需要按F5就运行这个项目就再VS Code里面设置一下编译再运行就好了。