webpack+webpack-dev-server+react搭建热更新项目

由于之前对webpack的了解也没有那么的多,所以在自己去搭建的时候就会遇到各种问题,这次自己从头到尾的搭建了一次,对webpack进行一次梳理

1、首先本人使用的版本是 webpack@3x、webpack-dev-server@2x(webpack4网上说还有坑,所以学习先不设计4.x版本了)

2、初始化项目npm init,然后生产package.json文件

3、创建一个src文件,并在文件下创建一个index.js文件,作为整个项目的入口文件,然后输入

      document.body.innerHTML = "

ghj
";

4、创建一个build文件,并在文件下创建一个index.html文件,作为整个项目的页面入口,并引入打包好的bundle.js文件

webpack+webpack-dev-server+react搭建热更新项目_第1张图片

5、在根一级的目录下面新建一个webpack.config.js文件,用作整个项目的webpack的文件

webpack+webpack-dev-server+react搭建热更新项目_第2张图片

目录结构如下

webpack+webpack-dev-server+react搭建热更新项目_第3张图片

然后在命令行里面输入命令webpack,就会自动的在build文件之下给生成一个新的bundle.js文件


搭建react的环境

下载相应的包和依赖

npm install react react-dom --save-dev

npm install babel babel-cli babel-loader --save-dev 

npm install babel-preset-env babel-preset-react --save-dev

注:以前编译es6以上语法用的是babel-preset-es2015,现在是时候说再见了,babel-preset-env是一个更定制化的插件,你可以指定你要兼容的浏览器版本,这样babel会选择编译该版本不支持的语法而不是全部编译成旧的语法,具体配置参见:babel-preset-env


webpack.config.js里面的配置

var path=require('path');


module.exports={
  entry: "./src/index.js",    //入口文件--绝对路径
  output: {
    path: path.resolve(__dirname,'build'),  //
    filename: 'bundle.js'
  },
  module:{
    loaders:[
      {
        test: /\.js$/, //配置要处理的文件格式,一般使用正则表达式匹配
        loader: 'babel-loader', //使用的加载器名称
        exclude:/node_modules/,
        query: {                //babel的配置参数,可以写在.babelrc文件里也可以写在这里
            presets: ['env', 'react']   //{"presets": ["react", "env"]}
        }
      }
    ]
  },
  devServer: {
    contentBase: "./build",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    //hot: true
  }

}

package.json文件里面scripts的配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --watch --color --port 8081"  //

  },


这样就实现了webpack+webpack-dev-server+react热更新的搭建。

注意:其中要想实现热更新需要在package.json文件和webpack.config.js文件里面分别都配置

你可能感兴趣的