【前端工程化】webpack——全套基础

最新推荐文章于 2022-06-25 16:17:54 发布

骆子无悔

最新推荐文章于 2022-06-25 16:17:54 发布

阅读量146

点赞数

分类专栏：前端工程化文章标签： js

本文链接：https://blog.csdn.net/weixin_44275259/article/details/108202363

版权

前端工程化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack——React项目搭建

项目初始化

创建package.json文件

创建package.json文件用于说明当前项目的一些依赖以及各种描述

 npm init -y

安装bable

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

@babel/core：是babel的核心库
@babel/preset-env：帮助我们把es6的语法编译成es5的语法
@babel/preset-react：则是帮我们识别JSX语法
babel-loader：则是帮我们把不同的文件转化成我们想要的格式输出，或者说就是将我们的经过babel处理后的代码进行输出成浏览器可以识别的文件。

安装webpack

npm install webpack webpack-cli --save-dev

安装webpack服务器

主要用于用来启动一个本地服务器来浏览我们的项目并且可以实现保存自动刷新以及实现代理服务等位置

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

安装html解析插件

webpack默认只能对.js文件进行最终打包，而我们的项目是有.html文件的，所以我们必须下载和html有关的loader和插件来对html进行处理。

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

安装react依赖包

npm install react react-dom --save

项目文件创建（1）

在这里插入图片描述
webpack.config.js

利用bable和plugins实现项目的整合

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      titel: 'react app',
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
};

.babelrc

加载指定的bable

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

项目文件创建（2）

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

App.js

import React from 'react'

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export  default App

项目脚本改变

找到package.json，添加一个scripts标签，然后加入指定脚本

 "scripts": {
    "start": "webpack-dev-server --open --mode development"
}

在这里插入图片描述

webpack——常见配置

配置lodaer——webapck内

webpack只会处理js代码，所以其他代码需要被loader群做处理才能变成合理的js代码；loader先与webpack之前做预处理

---JSLodaer系列
【1】TS loader（已默认配好）
【2】JSX loader（需添加）
---CSSLodaer系列
【1】style-loader：将CSS添加到DOM的内联样式标签style里
【2】css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码
【3】less-loader：处理less
【4】sass-loader：处理sass
【5】postcss-loader：用postcss来处理CSS
【6】babel-loader：把ES6文件转换成ES5文件
---fileLodaer系列
【1】file-loader：分发文件到output目录并返回相对路径
【2】url-loader 和 file-loader 类似，但是当文件小于设定的limit时可以返回一个Data Url
【3】html-minify-loader：压缩HTML文件

案例

【样式加载器举例】
{
        test: /\.css$/,  ---后缀名正则表达式
        use: [
        'style-loader', ---一个后缀多个处理
        'css-loader'
        ]
    }
【文件加载器举例】=>base64 str编码
{
        test: /\.(png|jpg|gif)$/,
            use: [
        	{
            	loader: 'url-loader',
            	options: {
            		limit: 8192
        		}
        	}]
    }

配置plugins——webapck内

在打包的时候，会遇到一些特殊需求比如复制，清空之前的缓存文件、将文件的输出目录进行更改，以及html编译格式等待，如同maven中的插件；我们需要了解这些插件的作用即可；

【1】HtmlWebpackPlugin 生成html文件
【2】CleanWebpackPlugin 清空旧文件
【3】Happypack	 快速打包
【4】copy-webpack-plugin 复制打包
【5】webpack-dev-server 热部署、热加载
【6】purifycss-webpack 去除未被使用的css
【7】mini-css-extract-plugin 将css变成行内样式
【8】extract-text-webpack-plugin 将css全部集成在一个文件减少请求
【9】optimize-css-assets-webpack-plugin 压缩css并优化css结构
【10】uglifyjs-webpack-plugin 压缩js

配置eslintrc——.eslintignore

Eslintrc主要用于提供语法检查，风格检查以及地址；

独立解除检查

利用/* eslint-disable no-new */ 可以解除检查

.eslintignore文件配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  /**
    * 继承一些插件，内部已经定义好了大批量的规则
   */
  'extends': [
    'plugin:vue/essential',
    '@vue/typescript'
  ],
  rules: {
             /**
              * 
               "off"或者0    //关闭规则关闭
               "warn"或者1    //在打开的规则作为警告（不影响退出代码）
               "error"或者2    //把规则作为一个错误（退出代码触发时为1）
             */
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',//生成环境不输出
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//生产环境不debuuger
        'vue/no-parsing-error': [2, {
         'x-invalid-end-tag': false
        }],
        'no-undef': 'off'
  },
  parserOptions: {//与发件检查工具
    parser: 'typescript-eslint-parser'
  }
}

.gitignore 用于忽略git文件

配置bable——.babelrc（待完善）

等待博主完善，如何完成自定义bable的加载

bable主要用于将超前的语法兼容成浏览器目前的语法；
虽然webpack本身就能够处理.js文件，但无法对ES2015+的语法进行转换，babel-loader的作用正是实现对使用了ES2015+语法的.js文件进行处理

plugins

该属性是告诉babel要使用那些插件，这些插件可以控制如何转换代码。

preset

告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合
我们随着时间的推移，将来可能会有跟多的版本插件,比如 bebel-preset-es2018,… 等等。
因此 babel-preset-env 出现了，它的功能类似于 babel-preset-latest，它会根据目标环境选择不支持的新特性来转译

其他：

babel-runtime ：它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6，只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。
babel-polyfill：它是通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.prototype.find 方法，引入polyfill, 我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。

骆子无悔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端工程化】webpack——全套基础

webpack——React项目搭建项目初始化创建package.json文件创建package.json文件用于说明当前项目的一些依赖以及各种描述 npm init -y安装bablenpm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev@babel/core：是babel的核心库@babel/preset-env：帮助我们把es6的语法编译成es5的语法@bab
复制链接

扫一扫