01 React 学习笔记 webpack配置篇

时间 2021-01-08

标签 javascript php css html java node react webpack git es6 栏目 React 繁體版

原文原文链接

最近有个项目须要react，我尼玛是个忠实的Vue党，可是粑粑仍是粑粑，开始学习，本教程只适合于新手，或者学生党javascript

webpack流程化安装

主要是为了熟悉react的目录结构，指令什么的，以及一些基础的webpack，会有不少配置的东西php

01建立目录**

mkdir react-demo // 新建项目文件夹
cd react-demo // cd到项目目录下
npm init // npm初始化

webpack 的一些操做css

npm i  webpack webpack-cli --save--dev
touch webpack.config.js

webpack配置文件 html

/*
 * @Descripttion:  webpack.config.js 
 * @version:  ON||FOR
 * @@Company: DCIT-SH
 * @Author: Oneself
 * @Date: 2020-11-27 16:37:06
 * @LastEditors: Oneself
 * @LastEditTime: 2020-11-27 16:39:44
 * @Statu: TODO:    webpack配置文件 
 */
const path = require('path');
module.exports = {
  entry: './src/app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定义输出目录
    filename: 'bundle.js'  // 定义输出文件名称
  }
};

package.json 添加webpack执行命令java

"scripts": {
  "build": "webpack --config webpack.config.js"
}

由于咱们的入口文件是'./src/app.js'，而咱们执行build的时候会先到入口文件，我感受的这个就像是thinkphp或者一些后端框架的 index.php，或者admin.php （意思上）而如今咱们并无入口文件，建立src目录，建立app.jsnode

npm run build

在咱们的根目下会生成一个dist目录，一个bundle.jsreact

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为经过webpack打包生成的资源文件提供Web服务。webpack

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

package.json 更新命令git

"scripts": {
    "dev":"webpack-dev-server"
}

添加配置
webpack.config.js新增devServer配置es6

devServer: {
  hot: true, // 热替换
  contentBase: path.join(__dirname, 'dist'), // server文件的根目录
  progress:true,//开启进度条
  compress: true, // 开启gzip
 //open:true, //自动打开浏览器,
  port: 8080, // 端口
},

报错 Cannot find module 'webpack-cli/bin/config-yargs'
这个错误格外的眼熟，刚学webpack时候就遇到过，
package.json 改为以下版本
方法1：前提是你知道你依赖的版本

"webpack-dev-server": "^依赖版本"
删除node_modules文件夹
npm i

方法2：最新版本

npm uninstall webpack-dev-server -g       卸载全局
npm uninstall webpack-dev-server -D      卸载局部(本地) 
npm install webpack-dev-server --save-dev      最新

方法3 看下之前项目的启动版本

npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 webpack-dev-server -D

麻蛋的又报错了

Error: spawn cmd.exe ENOENT

看到这个错误的时候，咱们就要考虑下， cmd.exe
定位错误的话，应该是咱们的电脑问题，通常是环境变量，
在后端的平常中，咱们会调用一些exe程序进行加密，拆解，拼图，会由于你的exe文件没有配置到电脑的环境变量，而找不到程序，
我查了下 cmd.exe是用户环境变量中加入System32
添加环境变量
 cmd.exe 在哪一个文件夹

C:\Windows\System32
仍是不行，我百度了下，须要重启下电脑。我坲了

OK重启后能够正常启动

安装 HtmlWebPackPlugin

说白就是html生成器，HTML模板插件让webpack 简化了HTML文件的建立
HtmlWebPackPlugin
为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
能够生成建立html入口文件，好比单页面能够生成一个html文件入口，配置N个html-webpack-plugin能够生成N个页面入口

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

webpack.config.js 添加配置添加在 module.exports

// 引入html插件文件
const HtmlWebPackPlugin = require('html-webpack-plugin');
---------------------------
plugins: [
  new HtmlWebPackPlugin({
    // template是模板文件须要咱们建立 
    template: './public/index.html',
    filename: path.resolve(__dirname, 'dist/index.html')，
    minify: {
                //true不换行
                collapseWhitespace: true
            },
    hash: true //生产环境下生成hash戳
  })
]
 npm run dev

多页面应用，我在网上看的时候，这个东西用的不是不少，可是有些面试题会问，多页面应用说白了就是多个入口，和后端那些框架的设计模式差很少，
webpack.config.js

module.exports = {
// 多入文件
    entry: {
        index: "./src/index.js", // 前台入口 
        admin: "./src/admin.js"  // 后台入口
    },
    output: {
        path: path.resolve(__dirname, 'dist'), // 定义输出目录
        filename: '[name].js',  // 定义输出文件名称  [name]自动获取入口的home和admin, 将entry中的键提取出来
        publicPath: "/"  //build以后的公共路径
    },
     plugins: [
        new HtmlWebPackPlugin({
            // template是模板文件须要咱们建立 
            template: './public/index.html',
            filename: path.resolve(__dirname, 'dist/index.html'),
            chunks:['index'],//只引用index.js,解决index.html里面有index.js和admin.js的问题
            minify: {
                //折叠换行true不换行
                collapseWhitespace: true
            },
            hash: true //生产环境下生成hash戳

        }),
        new HtmlWebPackPlugin({
            // template是模板文件须要咱们建立 
            template: './public/admin.html',
            filename: path.resolve(__dirname, 'dist/admin.html'),
            chunks:['admin'],//只引用index.js,解决index.html里面有index.js和admin.js的问题
            minify: {
                //折叠换行true不换行
                collapseWhitespace: true
            },
            hash: true //生产环境下生成hash戳
        })
    ]
}

感受我注释写的很清楚了，简单的说就是添加几个辨别项，将单页面转化为多页面，记得根据入口文件新建文件entry下如今是两个入口文件

npm run build

在咱们指定的目录下会生成dist index.js index.html ,admin.js admin.js 可是我看到了警告，

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ε=(´ο｀*)))唉，我给忘了一个mode，虽然不印象打包，可是仍是看着挺难受的，在 module.exports 中配置

//模式 默认两种production(生产环境:代码压缩) development(开发环境:代码不压缩)
    mode: "development",

loaders 配置css

npm install --save-dev css-loader style-loader mini-css-extract-plugin

css-loader：解析@import这种语法
style-loader：把css插入到head标签中
mini-css-extract-plugin:抽离css样式让index.html里面的css样式变成link引入

配置 webpack.config.js

let MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
// 在插件中引用 
plugins: [
 new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),
]
// 在模块中,配置不一样的规则 
  module: {
    //规则
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, //都放到了上面的main.css里面
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },

而后咱们测试下,看看是否将css引用了,在src目录下新建assets目录,新建两个css文件,在index.js中

@import '你放置css的位置'

npm run dev 
/*就会发现,你写的css已经加载到css中了, @import也能够在css中使用,将公共的类,和当前css*/
npm run build
/*就会生成对应配置的目录结构 .  static/css/main.css

css兼容性处理

npm install --save postcss-loader autoprefixer

配置 css 兼容性 `webpack.config.js`

// 在css 规则 中添加 一个新的postcss-loader规则 写在css配置的use中 
{ loader: "postcss-loader" },

在根目录下新建 postcss.config.js 配置浏览器建兼容

module.exports = {
    plugins: {
        'autoprefixer': {
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
          ]
        }
    }
};

打包后查看咱们的dist文件夹下css,自动生成css文件

-webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);

webpack.config.js 配置会愈来愈大，位置会愈来愈多，建议学习下 webpack

配置 css 压缩

npm install --save optimize-css-assets-webpack-plugin

//引入css压缩
let OptimizeCss = require("optimize-css-assets-webpack-plugin");
// 添加配置 
 optimization: {
    minimizer: [
      new OptimizeCss(), //优化css
    ],
  },

须要配置mode模式

配置 js 压缩

npm install --save uglifyjs-webpack-plugin
//js压缩
let UglifyjsPlugin=require('uglifyjs-webpack-plugin');
minimizer: [
	    //压缩js    
	    new UglifyjsPlugin({
                cache:true, //是否用缓存
                parallel:true, //是否并发打包
                sourceMap:true //es6映射es5须要用
            }), 
]

配置图片

npm install --save-dev url-loader

// 配置 
module:{
      rules: [       
         {
                test:/\.(png|jpg|gif|jpeg)$/,
                use:{
                    loader:"url-loader", //file-loader加载图片，url-loader图片小于多少k用base64显示
                    options: {
                        limit:100*1024, //小于100k用base64
                        //build以后的目录分类
                        outputPath:'static/images'                    },
                }
            },
       ]
}

es6转es5 配置

npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime

安装react

npm i react react-dom --save
npm i babel-preset-react --save-dev

安装babe

npm install babel-loader@next @babel/core @babel/preset-react @babel/runtime --save

Babel 是一个 JavaScript 编译器（说白就是为了解析js代码）

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可以运行在当前和旧版本的浏览器或其余环境中。下面列出的是 Babel 能为你作的事情：

语法转换
经过 Polyfill 方式在目标环境中添加缺失的特性 (经过 @babel/polyfill 模块)
源码转换 (codemods)
更新webpack.config.js

module: {
    rules: [
      {
        test: /\.(js | jsx)$/, // 由于react是jsx，须要添加jsx
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

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

更新index.js

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

class App extends React.Component{
    render(){
        return(
            <div>Hello React!</div>
    )
    }
}
export default App;

ReactDOM.render(<App />, document.getElementById("app"));

将index.js ReactDOM.render(<App />, document.getElementById("app")); 抛出的节点绑定到文件流中
更新public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 首页 </title>
</head>
<body>
    <div id="app">
        
    </div>
   
</body>
</html>

代码
参考：
https://react.docschina.org/tutorial/tutorial.html
http://www.javashuo.com/article/p-bkzcbokn-ee.html
http://www.javashuo.com/article/p-vcphucwk-kb.html

----待更新