webpack项目环境的搭建和react的简单封装

搭建的环境

首先查看node.js是不是10以上

node -v

项目搭建

第一步 :新建一个文件夹 为 react-stack
第二步: 在文件夹里面打开命令行 输入一下的指令

npm install -y  生成 package.json文件

//安装webpack 项目依赖和全局都要安装
cnpm install webpack -g
cnpm install webpack-cli -g

cnpm install webpack -D
cnpm install webpack-cli -D

创建一个配置文件 webpack.config.js

1 设置入口文件:entry选项
2 设置出口:output选项
代码如下:

const path = require('path')
const webpack = require('webpack')
module.exports = {
    mode: 'production',
    // 入口:指定webpack打包或本地服务运行时的程序入口文件
    // entry: './src/main.js'
    entry: path.resolve(__dirname, './src/main.js'),
    // 出口:打包之后,打包的结果放在哪里 dist
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
  }  

在package.json文件里配置打包文件

"build": "webpack --config webpack.config.js",

打包命令: webpack --config xxx.config.js

使用pulgins

1、html-webpack-plugin
它的作用是自动生成一个index.html单页面,并且把打包后.js脚本文件插入进去。

安装命令

  cnpm install html-webpack-plugin -D

在webpack.config.js 配置

 // plugins:用于扩展功能
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html'),
            title: 'react'
        }),
        new CleanWebpackPlugin(),
        // 用于热更新功能
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],

2、clean-webpack-plugin
它的作用是自动删除目录中的dist文件夹,无需手动操作了

搭建devServer

安装命令

cnpm install webpack-dev-server -D
cnpm install webpack-dev-server -g

在webpack.config.js 配置

    devServer: {
        port: '8090',
        open: true,
        contentBase: path.resolve(__dirname, 'public'),
        hot: true  // 开启热更新功能
    }

开启HMR热更新功能

HMR的作用是:局部代码发生变化时,不用刷新整个页面(重新编译)即可自动更新,速度比较快。
1.在devServer中添加 hot:true
2,引入webpack模块 添加插件

使用css和scss

安装命令

cnpm install style-loader -D
cnpm install css-loader -D
cnpm istall sass-loader -D
cnpm install node-sass -D

在webpack.config.js 配置

module:{
        rules:[
            {test:/\.(css|scss)$/, use:['style-loader','css-loader','sass-loader']}

        ]
    },

在安装node-sass的时候很容易安装不上 当你第二次安装的时候安装上了 运行的时候可能会报错,这时候你只要把node_modules的依赖包删除重新 安装这样就可以解决的

使用JSBabel

JS编译器,把ES6(下一代ECMAScript)转化成浏览器能够兼容的ES5代码
安装命令:

cnpm install babel-loder -D
cnpm install @babel/core -D

配置

rules: [
    {test:/\.js$/, use:['babel-loader'], exclude: /node_modules/}
]

使用ESLint

ESLint地址
安装

cnpm install eslint-loader -D
cnpm install eslint -D

配置

rules: [
{test:/\.js$/, use:['eslint-loder',], exclude:/node_modules/, enforce:'pre'}
]

ExtractTextWebpackPlugin
注意:要求git仓库中去找

安装

cnpm install mini-css-extract-plugin -D

插件地址

配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],

新建一个.exlintrc.json的文件

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
//在rules里面可以设置禁止使用的代码
    "rules": {
    }
}

生产环境和开发环境的分布

安装插件

cnom install cross-env -D

插件地址

在package.json里面配置cross-nev NODE_ENV=production

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
  }
}

production: 生产环境
development:开发环境
根据cross-env NODE_ENV=production 来区别开发环境和生产环境

react组件的分装

第一步:先安装Babel插件
插件的地址

cnpm install @babel/preset-react -D 支持jsx语法的babel插件
cnpm install @babel/preset-env -D  支持ES6中较新的语法

第二步:创建.baberlrc.json的文件配置

{
    "presets": [
      ["@babel/preset-react"],
      ["@babel/preset-env",{"useBuiltIns": "entry"}]
    ]
  }

第三步:封装组件

//引入react
import React from 'react'

//定义react的根组件
export defulat class App extends React.component{
      constructor(props){
            super(props)
           }
         render (){
            return (
             <div>
             <h1> 你好! </h1>
             </div>
            )
          }  
}

第四步:把封装好的组件渲染到真实的DOM上

//引入
 import React from 'react'
 import ReactDOM from 'react-dom'
 ReactDOM.render(< App  /> , document.getElementById('root'))

注意:在index.html 里的 root这个div 里不能有任何的子元素,给个空div就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值