合作,共赢,together and stronger.
Webpack && React Step by Step

原来一直用的是Vue ,现在在美团,基本全是 React ,所以开始入坑(虽然原来也学过一点)。不太推荐使用官方的 create-react-app 脚手架,手动配一下 Webpack ,能够学到更多,解决问题起来更加顺手。坑比较多,请慎入!

Github地址

目录结构

├── build
│   ├── bundle.js
│   └── index.html
├── package.json
├── src
│   ├── index.html
│   └── index.js
├── webpack.config.js
└── yarn.lock

package.json

{
  "name": "react-webpack-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ycjcl868/React-Webpack-boilerplate.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ycjcl868/React-Webpack-boilerplate/issues"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-class-properties": "^6.16.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-2": "^6.17.0",
    "classnames": "^2.2.5",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.10.0",
    "react-hot-loader": "^1.3.0",
    "react-router": "^2.8.1",
    "react-slick": "^0.14.5",
    "react-transform-hmr": "^1.0.4",
    "rmc-list-view": "^0.6.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "homepage": "https://github.com/ycjcl868/React-Webpack-boilerplate#readme"
}

webpack.config.js

var path = require('path');  
var webpack = require('webpack');  
var ROOT_PATH = path.resolve(__dirname);  
var APP_PATH = path.resolve(ROOT_PATH, 'src');  
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');  
var htmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {  
  entry: [
      'webpack/hot/only-dev-server',
      "./src/index.js"
  ],
  output: {
      path: BUILD_PATH,
      // publicPath: "/build/", 
      filename: "bundle.js"
  },
  module: {
      loaders: [  
          {
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: "babel-loader", 
            query:
              {
                presets:['react','es2015','stage-2'] // babel配置:添加这三个presets用来处理js和jsx
              }
          }, {
              test: /\.css$/,
              loaders: ['style', 'css', 'sass'], //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
              include: APP_PATH
          }, {
              test: /\.(png|jpg)$/,
              loader: 'url?limit=40000'  //图片文件使用 url-loader 来处理,小于40000字节的直接转为base64
          }
      ]
  },
  resolve:{
      extensions:['','.js','.json']   //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
  },
  devServer: {
      contentBase:BUILD_PATH,
      hot: true,  //热加载模式
      port: 8899,
      inline: true //inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中)
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.resolve(__dirname,'src/index.html'),
      filename: 'index.html',
      inject:'body'
    }),
    new webpack.NoErrorsPlugin(),//用来跳过编译时出错的代码并记录,使编译后运行时的包不会发生错误
    new webpack.HotModuleReplacementPlugin()//全局开启代码热替换
  ]
};

安装

yarn installnpm install

使用

npm run start

总结下Webpack的坑

less-loader

这个插件,需要安装 npm install less less-loader --save-dev ,两个才可以用。

加载其它模块(比如md,txt,...)

最好用 raw-loader

resolve.extensions

数组第一位,一定是空,

resolve:{  
    //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
    extensions:['','.ts','.tsx','.js','.html','.json']  
}

转载请注明:信鑫-King's Blog » Webpack && React Step by Step

分享到:

上一篇

下一篇