从0搭建前端项目架构-webpack配置

cd build
    touch webpack.config.client.js
复制代码

6.在webpack中配置项目打包的入口和出口文件。

• entry代表打包的入口文件，这里就是指定到app.js
• output代表打包后的出口文件。
  • filename：打包后的文件名，采用[name].[hash].js。[name]是项目的入口文件名，就是app，[hash]是hash串。采用hash写法，当项目中的代码改变了，会改变hash值，就会刷新浏览器的缓存。如果没有改动，就不会刷新缓存，达到使用缓存的效果。
  • path：最终打包到dist目录下
  • publicPath：这个配置是指定打包后的文件存放到指定的路径下，就是/public/[name].[hash].js。如果不指定，则是[name].[hash].js。可以作为静态文件和api的区分。

cont path = require('path')
    module.exports = {
        entry: {
            app: path.join(__dirname,'../client/app.js')
        },
        output: {
            filename: '[name].[hash].js',
            path: path.join(__dirname,'../dist'),
            publicPath: ''
        }
    }
复制代码

7.为了每次打包方便，在package.json里的scripts下写一条build命令，以后打包只需要执行npm run build就行。打包后就会生成一个dist文件夹。

"build:client": "webpack --config build/webpack.config.client.js"
复制代码

8.先写一个简单的react代码

• 安装react-dom

npm install react react-dom -S
复制代码

• 在App.jsx里面写一段react代码

import React from 'react';
  
  export default class App extends React.Component {
      render(){
          return (
              <div>this is app</div>
          )
      }
  }
复制代码

• 在app.js里面引入App.jsx

import React from 'react';
  import ReactDom from 'react-dom';
  import App from './App.jsx';
  
  ReactDom.render(<App />,document.body)
复制代码

9.因为不能识别jsx代码，所以需要在webpack中配置使其能够识别jsx代码。

js不需要babel不需要识别。

...省略以上配置
   module: {
       rules: [
           {
               test: /.(jsx | js)$/,
               loader: 'babel-loader'
           },
           {
               test: /.js$/,
               loader: 'babel-loader',
               exclude: [
                   path.join(__dirname,'../node_modules')
               ]
           }
       ]
   }
复制代码

10.因为在webpack中使用了babel-loader，需要安装下，同时需要安装babel-core。

npm install babel-loader@^7.1.2 babel-core@^6.26.0 -D
复制代码

11.由于需要识别babel，所以需要同时配置babel文件。这里安装指定的babel等包。在根目录下创建.babelrc文件

• 安装preset相关包

npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D
复制代码

• 在.babelrc文件中写配置

``
    {
        "presets": [
            ["es2015", {"loose":true}],
            "react"
        ]
    }
```
复制代码