修改前端文件

现在可以为程序创建新的前端了

编辑器中打开webpack配置文件（webpack.config.js）

修改前端入口用index.jsx替换默认index.html

entry: {
  // The frontend.entrypoint points to the HTML file for this build.
  // Use the next line to change the extension. For example, the
  // default configuration changes the extension to `.js`.
  index: path.join(__dirname, info.frontend.entrypoint).replace(/\.html$/, ".jsx"),
},

定位plugins项上面的module键的注释例子，然后将下面的几行取消注释
```
module: {
  rules: [
    { test: /\.(js|ts)x?$/, loader: "ts-loader" },
    { test: /\.css$/, use: ['style-loader','css-loader'] }
  ]
},
```
这些配置允许你的程序使用ts-loader编译器并导入css文件
保存webpack.config.js文件并退出
项目根目录下创建新的tsconfig.json文件

打开tsconfig.json文件，然后复制粘贴下面的内容到文件

{
    "compilerOptions": {
      "target": "es2018",        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
      "lib": ["ES2018", "DOM"],  /* Specify library files to be included in the compilation. */
      "allowJs": true,           /* Allow javascript files to be compiled. */
      "jsx": "react",            /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    },
    "include": ["src/**/*"],
}

保存修改并关闭tsconfig.json文件继续

上一页修改默认程序下一页为你的项目添加样式表

最后更新于4年前