首页
所有分类
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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 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
字符串(2) 内存泄露(1) 逆序(1) Inception(2) yolo3(1) PostMapping(1) Seaborn(1) Xception(1) tensorflow(2) ResNet50(1)
You might like
Protoss建筑一览
2020/03/14 星际争霸
终于听上了直流胆调频
2021/03/02 无线电
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php正则修正符用法实例详解
2016/12/29 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现随机森林random forest的原理及方法
2017/12/21 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
Darphin迪梵官网： 来自巴黎，植物和精油调制的护肤品牌
2016/10/11 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
2015年汽车销售工作总结
2015/04/07 职场文书
介绍信怎么写
2015/05/05 职场文书
element多个表单校验的实现
2021/05/27 Javascript