最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】把ReactJS项目react-hot-boilerplate中的Webpack 1升级到Webpack 3

ReactJS crifan 2442浏览 0评论

折腾:

【已解决】如何把react-hot-boilerplate的项目打包为生产环境

期间,发现还是先把webpack从1.x:

    “webpack”: “^1.15.0”,
    “webpack-dev-middleware”: “^1.6.1”,
    “webpack-hot-middleware”: “^2.10.0”

升级到最新的3,然后再去做各种设置吧。

这样可以提高效率。

webpack 升级 3

从 v1 迁移到 v2

Webpack 3 更新了啥? · Issue #34 · lishengzxc/bblog

🍾🚀 webpack 3: 正式发布!! 🚀🍾 – 众成翻译

Webpack 3 中的新特性 | 好记性不如烂键盘

webpack-3 react-router-4 react-15.6 升级记录 – mjzhang1993的博客 – CSDN博客

webpack   3

安装

➜  react-hot-boilerplate git:(master) ✗ npm install –save-dev webpack
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
updated 1 package in 12.432s

结果此处还是:

“webpack”: “^1.15.0”,

还是没有升级。

删除掉,重新去安装:

➜  react-hot-boilerplate git:(master) ✗ npm install –save-dev [email protected]
> [email protected] postinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
added 108 packages, removed 17 packages, updated 4 packages and moved 1 package in 27.064s

看到更新了:

“webpack”: “^3.5.4”,

命令行接口(CLI)

Node.js API

概念

对比

输出(Output)

此处webpack的CLI,是Webpack自己,而不是想要的webpack-dev-server

所以再去:

【已解决】把react-hot-boilerplate改为用最新webpack-dev-server去调试代码

【总结】

然后现在算是升级到了Webpack 3。

相关的配置如下:

react-hot-boilerplate/react-hot-boilerplate/package.json

{
  “name”: “react-hot-boilerplate”,
  “version”: “1.0.0”,
  “description”: “Boilerplate for ReactJS project with hot code reloading”,
  “scripts”: {
    “dev”: “cross-env NODE_ENV=development webpack-dev-server –progress –colors –hot –inline –open”,
    “lint”: “eslint src”,
    “build”: “rm -rf build && mkdir -p build && cp index.html build && cross-env NODE_ENV=production webpack -p –progress –colors”
  },
  “repository”: {
    “type”: “git”,
    “url”: “https://github.com/gaearon/react-hot-boilerplate.git”
  },
  “keywords”: [
    “react”,
    “reactjs”,
    “boilerplate”,
    “hot”,
    “reload”,
    “hmr”,
    “live”,
    “edit”,
    “webpack”
  ],
  “author”: “Dan Abramov <[email protected]> (http://github.com/gaearon)”,
  “license”: “MIT”,
  “bugs”: {
    “url”: “https://github.com/gaearon/react-hot-boilerplate/issues”
  },
  “homepage”: “https://github.com/gaearon/react-hot-boilerplate”,
  “devDependencies”: {
    “babel-core”: “^6.0.20”,
    “babel-eslint”: “^4.1.3”,
    “babel-loader”: “^6.0.1”,
    “babel-preset-es2015”: “^6.0.15”,
    “babel-preset-react”: “^6.0.15”,
    “babel-preset-stage-0”: “^6.0.15”,
    “eslint”: “^1.10.3”,
    “eslint-plugin-react”: “^3.6.2”,
    “express”: “^4.13.4”,
    “webpack”: “^3.5.4”,
    “webpack-dev-server”: “^2.7.1”
  },
  “dependencies”: {
    “adminlte-reactjs”: “^1.0.6”,
    “cross-env”: “^5.0.5”,
    “css-loader”: “^0.28.4”,
    “echarts-for-react”: “^1.4.4”,
    “jquery”: “^3.2.1”,
    “react”: “^15.4.0”,
    “react-dom”: “^15.4.0”,
    “react-hot-loader”: “^3.0.0-beta.7”,
    “style-loader”: “^0.18.2”
  }
}

react-hot-boilerplate/react-hot-boilerplate/webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);
// const ENV = process.env.NODE_ENV || ‘development’;
var isProd = (process.env.NODE_ENV === ‘production’);
console.log(`process.env.NODE_ENV=${process.env.NODE_ENV}, isProd=${isProd}`);
//process.env.NODE_ENV=development, isProd=false
let commonPlugins = [
  // new webpack.ProvidePlugin({
  //   $: ‘jquery’,
  //   ‘window.jQuery’: ‘jquery’,
  //   jQuery: ‘jquery’,
  //   ‘window.$’: ‘jquery’,
  // }),
  new webpack.optimize.CommonsChunkPlugin({
    name: ‘vendor’,
    filename: ‘vendor.bundle.js’
  }),
  // new webpack.HotModuleReplacementPlugin()
];
if (isProd) {
  // Note: current not add UglifyJsPlugin for production for:
  // when webpack -p, it will auto added UglifyJsPlugin, then omit here UglifyJsPlugin settings
  // commonPlugins.push(
  //   new webpack.optimize.UglifyJsPlugin({
  //     minimize: true
  //   })
  // );
}
module.exports = {
  entry: {
    index: ‘./src/index.js’,
    vendor : [
      // ‘webpack-hot-middleware/client’,
      ‘react-hot-loader/patch’,
      ‘./src/adminlte_app.js’
    ],
  },
  output: {
    // path: path.join(__dirname, ‘public’),
    // path: path.join(__dirname, ‘build’),
    path: path.resolve(__dirname, ‘build’),
    // filename: ‘bundle.js’,
    filename: ‘[name].js’,
    // filename: ‘./build/[name].js’,
    // publicPath: ‘/public/’
    // publicPath: ‘/public’
    // publicPath: ‘/assets/’
    // publicPath: ‘http://localhost:3000/public/’
  },
  // devtool: isProd ? ‘cheap-module-source-map’ : ‘eval’,
  devtool: isProd ? ‘false’ : ‘eval’,
  devServer:{
    // hot: true,
    // contentBase: path.join(__dirname, ‘dist’),
    contentBase: path.resolve(__dirname, ‘build’),
    // publicPath: path.resolve(__dirname, ‘build’),
    compress: true,
    port: 3000,
    historyApiFallback: true
  },
  plugins: commonPlugins,
  module: {
    // loaders: [
    rules: [
      {
        test: /\.js$/,
        //loaders: [‘react-hot-loader’, ‘babel-loader’],
        // use: [‘react-hot-loader’, ‘babel-loader’],
        use: [‘babel-loader’],
        // include: path.join(__dirname, ‘src’)
      },
      {
        test: /\.css$/,
        // loaders: [‘style-loader’, ‘css-loader’],
        use: [‘style-loader’, ‘css-loader’],
        // include: path.join(__dirname, ‘src’)
      }
    ]
  }
};

转载请注明:在路上 » 【已解决】把ReactJS项目react-hot-boilerplate中的Webpack 1升级到Webpack 3

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.185 seconds, using 22.11MB memory