编程 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 相关文章推荐

编写可维护面向对象的JavaScript代码[翻译]

Feb 12 Javascript

js中的数组Array定义与sort方法使用示例

Aug 29 Javascript

jQuery Mobile的loading对话框显示/隐藏方法分享

Nov 26 Javascript

使用console进行性能测试

Apr 27 Javascript

js 连续赋值的简单实现

Jun 13 Javascript

Angular懒加载机制刷新后无法回退的快速解决方法

Aug 30 Javascript

Vue2 使用 Echarts 创建图表实例代码

May 18 Javascript

jQuery滑动到底部加载下一页数据的实例代码

May 22 jQuery

angular中实现li或者某个元素点击变色的两种方法

Jul 27 Javascript

vue中导出Excel表格的实现代码

Oct 18 Javascript

浅谈JS中几种轻松处理'this'指向方式

Sep 16 Javascript

JavaScript ES6的函数拓展

Jan 18 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