webpack配置

发表于 | | 阅读量

一直以来，都不太会配置webpack，总是用vue-cli或者create-react-app来初始化项目，从而实现零配置。最近在看一本书，《React与Redux实践》，关于webpack，babel等的配置挺好的。本文就着作者思路再次梳理一下了。

在浏览器中运行React

组件复用

毫无疑问，一般用react写自己的组件，src/App.js，返回一个hello world

1
2
3
4
5
6
7
8
9
import React from 'react';
class App extends React.Component{
    render(){
        return <h1>hello world</h1>
    }
}
export  default App;

需要的依赖都在这里，

1
2
3
4
5
6
7
8
9
10
11
12
13
"dependencies": {
    "http-server": "^0.10.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.24.1",
    "webpack": "^2.5.1"
  }

在浏览器中渲染react组件

src/client.js

1
2
3
4
5
import React from 'react';
import  { render } from 'react-dom';
import App from './src/App';
render((<App/>), document.querySelector('#root'));

webpack配置

因为webpack只有打包功能，所以需要引入babel-loader来实现编译功能。使用webpack和babel-loader打包编译的具体步骤：

  1. 安装webpack和babel-loader,babel-core

    npm install –save-dev webpack babel-loader babel-core

  2. 添加webpack.config.js文件制定打包编译的配置信息：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module.exports = {
        entry: './src/client',
        output:{
            path: __dirname + '/static/dist',
            filename: 'main.js'
        },
        module: {
            loaders: [{test: /\.js$/, exclude: /node_module/, loaders: ['babel-loader']}]
        }
    }

entry表示入口文件，output中的path表示输出目录，filename表示输出文件名称。module这部分表示使用babel-loader来编译除了node-modules文件夹下的.js文件.

  1. 安装babel-preset-es2015和 babel-preset-react预设

    npm install –save-dev babel-preset-es2015 babel-preset-react

  2. 添加.babelrc，激活es2015和react的预设

    1
    {"presets": ["react", "es2015"]}

  3. 编译

    npm run build编译， 因为在package.json中写了

    1
    2
    3
    4
    5
      "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack && http-server -p 3000",
      "build": "webpack"
    },

    所以才能用npm run build 以及 npm start

  4. 在浏览器中运行

    将生成的代码路径加入到index.html中即可运行index.html

至此在浏览器中运行react便完全结束了