webpack-react 起步 配置

安装Webpack

  一 初步：

　　1. npm i -D 是npm install --save-dev 的简写，是指安装模块并保存到package.json
  的devDe pendencies，npm i -D webpack

　　2.全局安装 npm i -g webpack

  二 运行

在项目根目录下对应的命令行里通过node rnodules/.bin/webpack 运行Webpack 的可执行文件。

在Npm Script 里定义的任务会优先使用本项目下的Webpack

  三 行动

创建src 文件夹

md src
cd src

文件目录：

　　--index.html

　　--src

　　   --main.js

　　   --show.js

编写 webpack.config.js

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './src/main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

 根目录下执行 webpack。成功 js 文件都打包合并到bundle.js里

二.webpack 与 react 安装

安装步骤命令：

npm init -y
npm install webpack webpack-dev-server --save-dev
//报错可能需要
npm install --save-dev webpack-cli -g

//babel
npm install -D babel-loader @babel/core @babel/preset-env 

npm install --save @babel/polyfill// babel react ES6 

//代码检查 与webpack loader 
npm install --save-dev eslint-config-defaults
npm i -D eslint eslint-loader 

npm i -D react react-dom

npm install --save-dev @babel/preset-react

配置文件 根目录下

 .babelrc

{

  "presets": ["@babel/preset-react"]

}

.eslintrc

{
 "extends":"airbnb",
 "rules":{
    "comma-dangle":["error","never"]
 }
}

webpack.config.js

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry:  [
    //'react-hot-loader/patch',
    //'webpack/hot/only-dev-server',
    './app/main.js'
  ],
  output: {
    path: resolve(__dirname, 'build'),//打包后的文件存放的地方
    filename: "bundle.js",//打包后输出文件的文件名
    publicPath: "/"
  },
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    hot: true,
    publicPath:'/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
  devtool: "cheap-eval-source-map",
};

package.json

{
  "name": "mydemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack-production.config.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "webpack": "^4.41.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

  之后就可以使用这个配置作为自己 react 开发的基础。

  然后在命令行运行 webpack 就会创建 bundle.js

  详细见 git地址

二 create-react-app

react 更简单的方式是直接使用官方模板

 

$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start