搭建原生react-webpack整合項目

搭建原生react-webpack整合項目

0. 初始化項目依賴文件 package.json

  npm init -y

1. 安裝webpack相關的依賴 webpack/webpack-cli/webpack-dev-server

  npm i -D webpack webpack-cli webpack-dev-server

2. 安裝react相關的依賴 react/react-dom

npm i -S react react-dom

3. 配置webpack.config.js文件
   • 安裝html-webpack-plugin/copy-webpack-plugin

   npm i -D copy-webpack-plugin html-webpack-plugin
   

   • 配置腳本啓動命令
     • “dev” : “webpack-dev-server”
   • 安裝jsx和ECMA最新語法解析插件

       npm i -D babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
   

   • webpack.config.js配置文件內容

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    module.export = {
        entry: './src/index.js',
        devServer: {
           stats: "errors-only",
           contentBase: path.resolve(__dirname,"./dist")
       },
       output: {
           path: path.resolve(__dirname,'./dist'),
           filename: 'main.js'
       },
       module: {
           rules: [
                   {
                       test: /\.j(s|sx)$/,
                       use:"babel-loader",
                       // 第三方包不包含在內，不會被打包
                       exclude: path.resolve(__dirname,"./node_modules")
                   }
           ]
       },
        plugins: [
           new HtmlWebpackPlugin({
               template: path.resolve(__dirname,'./public/index.html')
           }),
           new CopyWebpackPlugin([
           {
               from: path.resolve(__dirname,'./public'),
               to: path.resolve(__dirname,'./dist')
           }
           ])
       ]
   
    }
   

   • babel.config.js配置文件

    module.export = {
       presets: ["@babel/preset-env", "@babel/preset-react"],
       plugins: ['@babel/plugin-proposal-class-properties']
   
    }
   
     plugins: ['@babel/plugin-proposal-class-properties']
   
    }