首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于webpack4.X从零搭建React脚手架的方法步骤

Posted in Javascript onDecember 23, 2018

项目初始化

$ npm init

安装webpack

本次创建是基于webpack4

$ npm install --save-dev

新建webpack配置文件

在根目录创建build文件夹，添加一个js文件，命名为webpack.base.conf.js

// webpack.base.conf.js 文件
const path = require('path');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
    entry: {
      app: './app/index.js'
    },
    output: {
      filename: "js/bundle.js",
      path: DIST_PATH
    }
};

使用merge的方式来组织webpack基础配置和不同环境的配置

先安装webpack-merge：

$ npm install --save-dev webpack-merge

在build文件夹中再添加一个js文件，命名为 webpack.prod.conf.js

// webpack.prod.conf.js 文件
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
  mode: 'production'
});

在根目录下创建app目录，然后创建index.js文件

var element =document.getElementById('root');
element.innerHTML = 'hello, world!';

在根目录创建一个public文件夹，然后新建一个index.html文件

// index.html
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>从零开始搭建react工程</title>
 </head>
 <body>
    <div id="root"></div>
    <script src="../dist/js/bundle.js"></script>
 </body>
</html>

当前项目目录树

|- /app
  |- index.js
 |- /node_modules
 |- /public
  |- index.html
 |- /build
  |- webpack.base.conf.js
  |- webpack.prod.conf.js
 |- package.json
 |- package-lock.json

安装webpack-cli

webpack 4.0 版本之后的webpack，已经将webpack命令工具迁移到webpack-cli模块了,需要安装 webpack-cli

$ npm install --save-dev webpack-cli

package.json文件 scripts属性配置一个build命令

其值为：webpack --config build/webpack.prod.conf.js，以下是scripts的相关代码

// package.json
"scripts": {
  "build": "webpack --config build/webpack.prod.conf.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

安装React

$ npm install --save react react-dom

修改app目录下的index.js的代码

import React from "react";
import ReactDom from "react-dom";

ReactDom.render(
  <h1>hello, world!</h1>,
  document.getElementById("root")
);

注意 import 属于ES6规范，因此需要转译ES2015+的语法，安装并配置 babel 以及相关依赖

$ npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react

根目录创建.babelrc文件，配置presets.

{
 "presets": [
  [
   "env",
   {
    "targets": {
     "browsers": [
      "> 1%",
      "last 5 versions",
      "ie >= 8"
     ]
    }
   }
  ],
  "react"
 ]
}

修改webpack.base.conf.js文件

// webpack.base.conf.js
const path = require('path');
const APP_PATH = path.resolve(__dirname, '../app');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
  entry: {
    app: './app/index.js'
  },  
  output: {
    filename: 'js/bundle.js',
    path: DIST_PATH
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: "babel-loader",
        include: APP_PATH
      }
    ]
  }
};

运行 npm run build

添加插件

public下的index.html本该自动添加到dist目录，并且引用资源自动加载到该文件，通过html-webpack-plugin实现这一步

$ npm install html-webpack-plugin --save-dev

webpack.prod.conf.js中配置plugins属性

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
    })
  ]
});

删除 index.html 中手动引入的 script 标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>从零开始搭建react工程</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

重新编译查看 npm run build 浏览器打开查看目录 dist 下的 index.html

以上步骤都成功的前提下继续走下一步

生成的文件名添加Hash值，目的是解决缓存问题

修改webpack.prod.conf.js，mode: 'production', 增加以下代码

// webpack.prod.conf.js
output: {
  filename: "js/[name].[chunkhash:16].js",
},

生成前需要清理之前项目生成的文件，因为由于文件名的改变如果不删除会一直增加

安装插件 clean-webpack-plugin

$ npm install --save-dev clean-webpack-plugin

修改 webpack.prod.conf.js

// webpack.prod.conf.js
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  output: {
    filename: "js/[name].[chunkhash:16].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
    }),
    new CleanWebpackPlugin(['../dist'], { allowExternal: true })
  ]
});

公共代码与业务代码分离

修改 webpack.base.conf.js 的 entry 入口属性，抽出框架代码

entry: {
   app: './app/index.js',
   framework: ['react','react-dom'],
},

修改webpack.prod.conf.js，增加以下代码，目的是分离框架代码和业务代码

虽然上面步骤抽出框架代码生成两个文件，但是app.js还是包含框架代码

optimization: {
    splitChunks: {
      chunks: "all",
      minChunks: 1,
      minSize: 0,
      cacheGroups: {
        framework: {
          test: "framework",
          name: "framework",
          enforce: true
        }
      }
    }
  }

cacheGroups对象，定义了需要被抽离的模块

其中test属性是比较关键的一个值，他可以是一个字符串，也可以是正则表达式，还可以是函数。如果定义的是字符串，会匹配入口模块名称，会从其他模块中把包含这个模块的抽离出来

name是抽离后生成的名字，和入口文件模块名称相同，这样抽离出来的新生成的framework模块会覆盖被抽离的framework模块

整合 webpack-dev-server

开发环境开启服务监听文件改动实时更新最新内容

$ npm install --save-dev webpack-dev-server

在build中添加webpack.dev.conf.js文件

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  output: {
    filename: "js/[name].[hash:16].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      minify: {
        html5: true
      },
      hash: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    port: '8080',
    contentBase: path.join(__dirname, '../public'),
    compress: true,
    historyApiFallback: true,
    hot: true,
    https: false,
    noInfo: true,
    open: true,
    proxy: {}
  }
});

在package.json scripts属性添加内容

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

npm run dev

自动打开浏览器打开入口页面实时更新

独立导出 css 文件

安装css相关依赖

sass less 预处理

$ npm install extract-text-webpack-plugin
$ npm install style-loader css-loader postcss-loader autoprefixer --save-dev
$ npm install less sass less-loader sass-loader stylus-loader node-sass --save-dev

webpack.base.conf.js 文件修改

// webpack.base.conf.js
{
  test: /\.css$/,
  use: [
    {
     loader: "style-loader" //在html中插入<style>标签
     },
     {
       loader: "css-loader",//获取引用资源，如@import,url()
     },
     {
       loader: "postcss-loader",
       options: {
          plugins:[
            require('autoprefixer')({
              browsers:['last 5 version']
            })
         ]
       }
    }
   ]
},
{
  test:/\.less$/,
  use: [
     { loader: "style-loader" },
     { loader: "css-loader" },
     {
      loader: "postcss-loader",//自动加前缀
      options: {
          plugins:[
             require('autoprefixer')({
               browsers:['last 5 version']
             })
         ]
      }
     },
     { loader: "less-loader" }
   ]
},
{
   test:/\.scss$/,
   use:[
       { loader: "style-loader" },
       {
           loader: "css-loader",
       },
       { loader: "sass-loader" },
       {
        loader: "postcss-loader",
       options: {
          plugins:[
             require('autoprefixer')({
              browsers:['last 5 version']
             })
          ]
       }
     }
   ]
},

图片和路径处理

$ npm i file-loader url-loader --save-dev

webpack.base.conf.js 文件修改

// webpack.base.conf.js
{
  test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,
  use: 'url-loader?limit=8129', 
  //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
  exclude: /node_modules/
}

build 时报错

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (F:\react\createApp\node_modules\webpack\lib\Chunk.js:824:9)

webpack4.0中使用“extract-text-webpack-plugin”报错

解决办法

$ npm install extract-text-webpack-plugin@next

背景图片路径问题

由于css文件分离出来的原因，会导致在css文件夹下找images文件夹下的图片

解决办法 publicPath属性改为 '/'，以绝对路径的方式寻找资源

{
  test:/\.(png|jpg|gif)$/,
  use:[{
    loader:'url-loader',
    options: {
       // outputPath:'../',//输出**文件夹
       publicPath: '/',
       name: "images/[name].[ext]",
       limit:500 //是把小于500B的文件打成Base64的格式，写入JS
     }
   }]
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于webpack4.X从零搭建React脚手架的方法步骤

- Author -

temulun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
跟我学习javascript的this关键字
May 28 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 #Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
JavaScript时间日期操作实例小结【5个示例】
Dec 22 #Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 #Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 #Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 #Javascript
Element input树型下拉框的实现代码
Dec 21 #Javascript
池化技术(1) 主题(1) Repository接口(3) Spring Data JPA(4) 线程池(1) FutureTask(3) ForkJoin(1) systemctl(1) JAVA(88) Android(19)
You might like
中篇：安装及配置PHP
2006/12/13 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
详解js产生对象的3种基本方式（工厂模式，构造函数模式，原型模式）
2017/01/09 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python循环监控远程端口的方法
2015/03/14 Python
Python的设计模式编程入门指南
2015/04/02 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python怎么判断素数
2020/07/01 Python
如何用Python 实现全连接神经网络（Multi-layer Perceptron）
2020/10/15 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Lime Crime官网：美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
俄罗斯第一家多品牌在线奢侈品精品店：Aizel.ru
2020/09/06 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
建筑工地门卫岗位职责
2014/04/30 职场文书
贷款承诺书范文
2014/05/19 职场文书
民主评议党员总结
2014/10/20 职场文书
画展邀请函
2015/01/31 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
Golang Web 框架Iris安装部署
2022/08/14 Python