首页 > 其他分享 >weback5基础配置详解

weback5基础配置详解

时间：2024-03-11 09:44:06浏览次数：18  
标签：npm weback5 配置 module loader webpack 详解 dev js 

            <div id="content_views" class="markdown_views prism-tomorrow-night">
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                <h3><a name="t0"></a><a id="1_1"></a>1、安装</h3>

命令：

npm init -y
npm install webpack webpack-cli --save-dev

  • 1
  • 2

在项目的根目录下启动 cmd，执行 webpack 命令会出现不是内部或外部命令（因为是本地安装），可以执行以下命令构建：

npx webpack

  • 1

2、配置

webpack.config.js配置文件

在项目根目录下创建 webpack.config.js 文件，配置内容如下：

const path = require('path')

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, './dist')

},

mode: 'development'

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在 package.json 中配置 npm script 脚本：

{
  "scripts": {
    "build": "webpack"
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5

此时，打包命令如下：

npm run build

  • 1

插件

以 html-webpack-plugin 为例，安装：

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

  • 1

在 webpack.config.js 文件添加以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, './dist'),

clean: true  // 清除旧的打包文件

},

plugins: [

new HtmlWebpackPlugin({

template: './index.html', // 模板位置

filename: 'index.html', // 打包后的html文件名称

inject: 'body' // script标签位置，可选值：body/head

})

]

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

需要在项目根目录创建 index.html 模板文件。

设置 mode 模式

开发模式

module.exports = {
    mode: 'development'
}

  • 1
  • 2
  • 3

生产模式

module.exports = {
    mode: 'production'
}

  • 1
  • 2
  • 3

区别：开发模式打包的 .js 文件没有压缩，并且显示详细信息；开发模式打包的 .js 文件是压缩后的文件

源代码调试

代码异常时定位到源码，在 webpack.config.js 文件中配置：

module.exports = {
	devtool: 'inline-source-map'
}

  • 1
  • 2
  • 3

devtool 字段的模式包括：

模式说明
eval每个 module 会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL
source-map生成一个 SourceMap 文件
inline-source-map生成一个 DataURL 形式的 SourceMap 文件
hidden-source-map和 source-map 一样，但不会在 bundle 末尾追加注释
eval-source-map每个 module 会通过 eval() 来执行，并且生成一个 DataURL 形式的 SourceMap
cheap-source-map生成一个没有列信息（column-mappings）的 SourceMaps 文件，不包括 loader 的 sourcemap （譬如 babel 的 sourcemap）
cheap-module-source-map生成一个没有列信息（column-mappings）的 SourceMap 文件，同时 loader 的 sourcemap 也被简化为只包含对应行的

动态编译

修改 package.json 中的 npm script 脚本：

{
    “scripts”: {
        "build": "webpack --watch"
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5

本地服务器

安装：

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

  • 1

配置 npm script ：

{
    "scripts": {
        "dev": "webpack-dev-server",
    	"build": "webpack --watch"
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

启动服务：

npm run dev

  • 1

在浏览器中访问项目 http://127.0.0.1:8080/

配置默认打开浏览器：

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

  • 1
  • 2
  • 3
  • 4
  • 5

webpack.config.js 文件配置本地服务器：

const path = require('path')

module.exports = {

devServer: {

static: path.resolve(__dirname, './dist'),

compress: true, // 服务器端是否进行代码压缩，传输 zip 压缩包

port: 8080, // 端口号

host: '0.0.0.0', // 

headers: { // 配置响应头

'X-Access-Token': 'xxx'

},

proxy: {

'/api': {

target: 'http://192.168.1.100:3000', // 真实的服务器地址

pathRewrite: {

'^/api': ''

}

}

},

https: { // 配置HTTPS证书

cacert: './server.pem',

pfx: './server.pfx',

key: './server.key',

cert: './server.crt',

passphrase: 'webpack-dev-server',

requestCert: true

},

historyApiFallback: true, // 配置 SPA 应用的 history 路由模式

hot: true, // 模块热替换

liveReload: true, // 开启热更新

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

加载资源

（1）resource资源

// webpack.config.js

module.exports = {

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, './dist'),

clean: true,

assetModuleFilename: 'image/[contenthash][ext]'  // 自定义静态资源打包目录与名称

},

module: {

rules: [

{

test: /.jpg|.png$/,

type: 'asset/resource',  // 发送一个单独文件的URL

generator: {

filename: 'images/[contenthash][ext]'  // 优先级高于 output.assetModuleFilename

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

（2）inline资源

不会打包出任何静态资源文件

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.jpg|.png$/,

type: 'asset/inline'  // 导出一个资源的Data URI，页面中的图片为 base64

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

（3）source资源

不会打包出任何静态资源文件

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.txt$/,

type: 'asset/source'  // 导出资源的源代码

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

通用资源类型 asset，在导出一个 data URI 和发送一个单独的文件之间自动选择。

默认地，当文件小于 8kb 时，将会被视为 inline 模块类型，否则会被视为 resource 模块类型。可以在 module rule 层级中，设置 Rule.parser.dataUrlCondition.maxSize 选项来修改条件。修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.jpg$/,

type: 'asset',

parser: {

dataUrlCondition: {

maxSize: 200 * 1024 // 小于200kb是为 inline 模式

}

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

加载CSS

需要安装 css 相关的 loader：

npm install css-loader style-loader --save-dev

  • 1

css-loader 用于编译 css 文件，style-loader 用于将 css 代码加载到 .html 模板文件中。

配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.css$/,

use: ['style-loader', 'css-loader'] // loader执行顺序为逆向加载（数组元素的倒序）

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在项目中引入 sass，安装 sass 和 sass-loader：

npm install sass sass-loader --save-dev

  • 1

修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.(css|scss)$/,

use: ['style-loader', 'css-loader', 'sass-loader'] // loader执行顺序为逆向加载（数组元素的倒序）

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

要以模块化的方式将 .css 和 .scss 样式文件引入 .js 文件中

抽离 CSS

需要安装插件：

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

  • 1

mini-css-extract-plugin 插件最小支持 webpack5 版本

修改配置文件：

// webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

plugins: [

new MiniCssExtractPlugin({

filename: 'style/[contenthash].css'

})

],

module: {

rules: [

{

test: /.(css|scss)$/,

use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

压缩 CSS

安装插件：

npm install css-minimizer-webpack-plugin --save-dev

  • 1

修改配置文件：

// webpack.config.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = {

mode: 'production',

optimization: {

minimizer: [

new CssMinimizerPlugin()

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

配置完成后，执行构建命令 npm run build， 打包后的 css 代码就被压缩了。

加载 fonts 字体

修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.(woff|woff2|eot|ttf|otf)$/,

type: 'asset/resource'

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

加载数据

（1）加载 csv 、tsv 文件

安装：

npm install csv-loader --save-dev

  • 1

修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.(csv|tsv)$/,

use: ['csv-loader']

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

（2）加载 xml 文件

安装：

npm install xml-loader --save-dev

  • 1

修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.xml$/,

use: ['xml-loader']

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

（3）加载 yaml 文件

安装依赖：

npm install yaml --save-dev

  • 1

修改配置文件：

// webpack.config.js

const yaml = require('yaml')

module.exports = {

module: {

rules: [

{

test: /.yaml$/,

type: 'json',

parser: {

parse: yaml.parse

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

（4）加载 toml 文件

安装依赖：

npm install toml --save-dev

  • 1

修改配置文件：

// webpack.config.js

const toml = require('toml')

module.exports = {

module: {

rules: [

{

test: /.toml$/,

type: 'json',

parser: {

parse: toml.parse

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

（5）加载 json5 文件

webpack 默认可以编译 json 文件，如果使用了升级版的 .json5 文件，需要安装依赖：

npm install json5 --save-dev

  • 1

修改配置文件：

// webpack.config.js

const json5 = require('json5')

module.exports = {

module: {

rules: [

{

test: /.json5$/,

type: 'json',

parser: {

parse: json5.parse

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

ES6转ES5

将 ES6 代码转为 ES5 代码需要 babel-loader 加载器，其中：

  • babel-loader：在 webpack 中应用 babel 解析 ES6 的桥梁；
  • @babel/core：babel 核心模块；
  • @babel/preset-env：babel 预设，一组 babel 插件的集合。

安装：

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

  • 1

修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

还需要再安装 regeneratorRuntime 插件，它是 webpack 打包生成的全局辅助函数，有 babel 生成，用于兼容 async/await 语法。
安装插件：

# 生产环境运行时需要这个插件，要安装到生产环境依赖
npm install @babel/runtime --save

# 编译时需要在使用 regeneratorRuntime 的地方自动 require 导包

npm install @babel/plugin-transform-runtime --save-dev


  • 1
  • 2
  • 3
  • 4
  • 5

修改配置文件：

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env'],

plugins: [

['@babel/plugin-transform-runtime']

]

}

}

}

]

}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

配置 eslint

安装 eslint

npm install eslint --save-dev

  • 1

初始化 .eslintrc 文件，执行以下命令自定生成：

npx eslint --init

  • 1

在控制台中选择如下：

$ npx exlint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No
√ Where does your code run? · browser
√ How would you like to dofine a sytle for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JSON

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

.eslintrc 文件的默认配置如下：

  • env：设置脚本的运行环境；
  • extends：继承社区整理好的配置规则，例如 eslint-plugin-react/recommended 使用社区的 react 规则；
  • plugins：添加的插件，为 eslint 增加新的检查规则，例如 eslint-plugin-react 是对 react 项目的检查规则；
  • parser：配置解析项目的规则，例如 @typescript-eslint/parser；
  • parserOptions：搭配 parser ，指定需要支持的 javascript 语言选项；
  • globals：当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了；readonly 表示可读不可写，writable 表示可读可写；
  • rules：具体的规则，off 或 0 表示关闭规则；warn 或 1 表示使用警告级别开启规则（不会退出程序）；error 或 2 表示使用错误级别开启规则（触发规则会退出程序）。

结合 webpack 使用

安装：

npm install eslint-loader --save-dev

  • 1

修改 webpack.config.js 文件：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js | jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            }
        ]
    },
    devServer: {
        client: {
            overlay: true // 默认为true，即开启热更新功能
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
    </div>

标签：npm,weback5,配置,module,loader,webpack,详解,dev,js
From： https://www.cnblogs.com/mounterLove/p/18061538

相关文章

  • 服务器配置记录MSSQL
    安装SQLSERVER的时候报错：无法通过WINDOWS功能控制面板自动安装或卸载WINDOWSSERVER角色和功能。WinServer2012R2安装MSSQL2008R2只需安装.NETFramework3.5/更高版本1.打开“服务器管理器”，选择“添加角色和功能”  2.连续点击“下一步”，直到“功能”选项卡中，勾选......
  • 多线程系列(十六) -常用并发原子类详解
    一、简介在Java的java.util.concurrent包中，除了提供底层锁、并发同步等工具类以外，还提供了一组原子操作类，大多以Atomic开头，他们位于java.util.concurrent.atomic包下。所谓原子类操作，顾名思义，就是这个操作要么全部执行成功，要么全部执行失败，是保证并发编程安全的重要一环。相......
  • Go 中的监视器模式与配置热更新
    Go中的监视器模式与配置热更新原创 波罗学 码途漫漫 2024-03-1108:03 上海 听全文上篇介绍GO的GUI库Fyne时，提到Fyne的数据绑定用到了监听器模式。本文就展开说下我对Go中监听器模式的理解和应用吧。监听器模式简介监听器模式，或称观察者模式，它主要涉及......
  • 接口的详解 ：接口 对象=new 实现类
    首先接口是一个特殊的抽象类既然是类就会创建对象 接口是为了实现多态接口是为了实现多态。接口是为了实现多态。接口回调：interfacePeople{voidpeopleList();}classStudentimplementsPeople{publicvoidpeopleList(){System.out.println("I’m......
  • Session详解
    一、什么是sessionsession在网络应用中称为“会话控制”，是服务器为了保存用户状态而创建的一个特殊的对象。简而言之，session就是一个对象，用于存储信息。二、session有什么用我们先来想一个问题，这个问题就是我们在游览购物网站时，我们并没有登录，但是我们任然可以......
  • Go语言VSCode开发环境配置
    最近学习Golang，先把开发环境配置好。一、安装Go语言开发包https://golang.google.cn/dl/ 按步骤安装即可，安装完成后需要设置Windows环境变量 配置好，做个测试二、VSCodeGolang开发环境配置vscode安装go插件时,由于各种原因,在安装插件时总是失败,所以先执行以下操作：在......
  • VSCode 配置 Spring Boot 项目开发环境
    神器IDEA在升级到2023之后越发卡顿,EDU邮箱也不能用了,照现在这个JDK版本的升级速度,神器不升级也不行,需要开始物色替代品.其它IDE我用得少,VSCode还是比较熟悉的,可以作为备选项.两三年前曾经试过配置Java环境,存在不少问题作罢.最近搜了下相关的文章,感觉VSCode对Ja......
  • Java登陆第三十四天——Node.js安装、npm配置、npm命令
    Nodejs是JS的运行环境，使JS可以运行在服务端，可以夸平台，可以运行在浏览器之外，成为一款全栈编程语言。Node.js安装Nodejs官网，进入......
  • 深度学习-卷积神经网络-目标检测YOLO-v1详解-54
    目录1.结构3.总结3.训练样本的构造4.损失函数5.训练6.推理6.小结参考：https://www.zhihu.com/tardis/zm/art/46691043?source_id=1005输入一张图片，要求输出其中所包含的对象，以及每个对象的位置（包含该对象的矩形框）RCNN开创性的提出了候选区(RegionProposals)的方法，先从......
  • 三、MyBatis基础配置之映射文件Mapper.xml（均为单表查询示例）
    一）动态if需求：多条件组合查询。  二）动态foreach需求：多值查询。  三）动态抽取......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99