创建React webpack4.x项目

最新推荐文章于 2023-04-26 23:29:51 发布

前端菜鸡小卒

最新推荐文章于 2023-04-26 23:29:51 发布

阅读量241

点赞数

分类专栏： react 文章标签： react项目配置webpack4.x

本文链接：https://blog.csdn.net/qq_30376375/article/details/100086719

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近看到一帖子创建基本的webpack4.x项目，发现都没写完整，自己总结梳理了下：

1、创建一个项目文件夹(比如react-domo)

2、在项目文件夹(react-domo)下运行 npm init -y 快速初始化项目，生成package.json文件

3、在项目根目录，创建src文件夹，在src文件夹下新建index.js和index.html

4、安装webpack和webpack-cli插件

cnpm i webpack webpack-cli -D

5、在项目根目录下新建webpack.config.js文件

//向外暴露了一个打包的配置对象；
//因为webpack是基于Node构建的，所以webpack支持所有Node API和语法
module.exports={
    mode: 'development'    //development 开发环境 、 production 产品环境
}

6、安装并配置 webpack-dev-server(开发环境自动打包编译)，将打包好的main.js是托管到了内存中，所以在项目根目录中看不到；但是我们可以认为，在项目根目录中，有一个看不到的 main.js ；

cnpm i webpack-dev-server -D

7、在 package.json 文件中"scripts"对象下新增 “dev”命令，并进行端口、域名等配置

// open：直接打开浏览器  port 3000：端口号 3000 hot：实现页面无刷新就获取新的数据 host：域名
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },

8、安装配置html-webpack-plugin

cnpm i html-webpack-plugin -D

在webpack.config.js文件中配置

const path = require('path')
//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
//导入在内存中自动化生成index页面的 插件
//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    //源文件,表明是根据哪个文件生成内存中的页面   注意dirname前面是两个下划线
    template: path.join(__dirname, './src/index.html'),
    //生成的内存中网页的名称
    filename: 'index.html'
})
//
module.exports = {
    mode: 'development',
    plugins:[
        htmlPlugin
    ] 
}

9、安装react 和 react-dom 包

cnpm i react react-dom -S

10、安装 babel 插件

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

// 若出现 如下问题：
// Error: Cannot find module '@babel/core'
// babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use // // Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

// 解决办法：   

cnpm i babel-loader@7 -D

cnpm i babel-preset-env babel-preset-stage-0 -D

11、安装能够识别转换 JSX 语法的包

cnpm i babel-preset-react -D

12、在 webpack.config.js 中添加对 babel插件的引用，用于识别jsx语法

//webpack 默认只能打包处理.js后缀名类型的文件，
//像.png .vue 无法主动处理
//所以要配置第三方的loader；
//所有第三方模块的配置规则放入module(只要webpack处理不了的语法，都会到module中寻找第三方配置规则)
module: {
  rules: [
    {
      test: /\.js|jsx$/,
      use: 'babel-loader',
      exclude: /node_modules/ //排除项目，必须,是正则不是字符串
    }
  ]
}

13、在项目根目录文件夹中，添加babel配置文件 .babelrc

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

14、安装并在webpack.config.js 文件中配置style-loader, css-loader

cnpm i style-loader css-loader -D

在webpack.config.js 文件中配置

const path = require('path');

//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
  //源文件,注意dirname前面是两个下划线
  template: path.join(__dirname, './src/index.html'),
  //生成在内存中的名字
  filename: 'index.html'
})
// 向外暴露一个打包的配置对象  因为webpack是基于node构建的，所以weback支持所有node api 和语法
//webpack 默认只能打包处理.js后缀名类型的文件，
//像.png .vue 无法主动处理
//所以要配置第三方的loader；
//所有第三方模块的配置规则放入module

module.exports = {
  mode: 'development',  // production
  plugins: [
    htmlPlugin
  ],
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        use: 'babel-loader',
        exclude: /node_modules/ //排除项目，必须,是正则不是字符串
      },
      {
        test: /\.css$/,
        // 大家可以在css-loader之后，通过？追加参数
        // 其中，有一个固定的参数，叫做modules，表示为普通的CSS样式表，启用模块化
        // css模块化，只针对 类选择器 和id选择器生效
        // css模块化，不会将标签选择器模块化
        use: ['style-loader', 'css-loader']
      }  // 打包处理CSS样式表的第三方loader
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],  // 表示，这几个文件的后缀名，可以省略不写(import导入组件时)
    // 注意这里的@符号表示项目的根目录中的src目录
    alias: {
      '@': path.join(__dirname, './src') // 这样，@ 就表示 项目根目录中的src的这一层路径
    }
  }
}

15、安装并在webpack.config.js 文件中配置sass-loader, node-sass和打包的字体文件的loader(file-loader 、url-loader)

cnpm i sass-loader node-sass -D

cnpm i file-loader url-loader -D

配置webpack.config.js

const path = require('path');

//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
  //源文件,注意dirname前面是两个下划线
  template: path.join(__dirname, './src/index.html'),
  //生成在内存中的名字
  filename: 'index.html'
})
// 向外暴露一个打包的配置对象  因为webpack是基于node构建的，所以weback支持所有node api 和语法
//webpack 默认只能打包处理.js后缀名类型的文件，
//像.png .vue 无法主动处理
//所以要配置第三方的loader；
//所有第三方模块的配置规则放入module

module.exports = {
  mode: 'development',  // production
  plugins: [
    htmlPlugin
  ],
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        use: 'babel-loader',
        exclude: /node_modules/ //排除项目，必须,是正则不是字符串
      },
      {
        test: /\.css$/,
        // 大家可以在css-loader之后，通过？追加参数
        // 其中，有一个固定的参数，叫做modules，表示为普通的CSS样式表，启用模块化
        // css模块化，只针对 类选择器 和id选择器生效
        // css模块化，不会将标签选择器模块化
        use: ['style-loader', 'css-loader']
      },  // 打包处理CSS样式表的第三方loader
      {
        test: /\.ttf|woff|woff2|eot|svg$/,
        use: 'url-loader'
      }, // 打包处理字体文件的loader
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader']
      } // 打包处理scss文件的loader
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],  // 表示，这几个文件的后缀名，可以省略不写(import导入组件时)
    // 注意这里的@符号表示项目的根目录中的src目录
    alias: {
      '@': path.join(__dirname, './src') // 这样，@ 就表示 项目根目录中的src的这一层路径
    }
  }
}