webpack体验

记录：259

本例环境：

Node.js: v14.17.3

Npm: 6.14.13

webpack: 4.46.0

Visual Studio Code: 1.59.1

一、名词

Node.js：一个基于Chrome V8引擎的JavaScript运行时；运行在服务端的JavaScript，基于事件驱动I/O服务端JavaScript环境。

npm：a JavaScript package manager(JavaScript包管理器)。

webpack：前端项目构建工具（打包工具），功能包括模块化支持、代码压缩混淆、处理js兼容问题、性能优化等。

二、常用命令

官网：https://www.npmjs.cn/

查看模块版本：npm view jquery versions

安装模块：npm install jquery  -S

卸载模块：npm uninstall jquery

安装模块（指定版本）：npm install jquery@3.3.0  -S

查看相应配置信息：npm config ls

查看镜像源：npm config get registry

设置镜像源：npm config set registry https://registry.npm.taobao.org

安装模块（全局安装）：npm i -g @vue/cli

注意一：

全局安装模块时出现报错信息：Error: EPERM: operation not permitted。

本例解决：使用管理员模式运行命令行

注意二：

-D：​-save-dve简写，自动把模块和版本号添加到package.json文件的devDependencies中，开发环境中协助开发需要使用。

-S：-save简写，自动把模块和版本号添加到package.json文件的dependencies中，在生产环境打包时需要使用。

安装时，没有指定版本的话，默认安装最新。

三、webpack

本例以webpack_demo项目为例，记录体验步骤。

1.初始化webpack_demo

1.1新建webpack_demo目录

使用Visual Studio Code工具打开，在Terminal->New Terminal新建一个终端窗口。

 1.2初始化包管理配置文件

执行命令：npm init -y

在webpack_demo下生成package.json文件，即包管理配置文件。

1.3在webpack_demo下创建src目录

1.3.1在webpack_demo/src目录下创建index.html和index.js文件

1.3.2在webpack_demo/src目录下创建如下目录

webpack_demo\src\components：存放vue相关组件

webpack_demo\src\css：存放样式表相关文件

webpack_demo\src\images：存放图片文件

注:本例在https://www.iconfont.cn/下载了图片，非商业免费使用。

2.安装jQuery

2.1安装jQuery

执行命令：npm install jquery -S

在webpack_demo目录中生成node_modules，在node_modules存放安装的各类模块，当前安装模块jquery在webpack_demo\node_modules\jquery中。

2.2使用jQuery

在webpack_demo\src\index.js中添加如下代码：

import $ from 'jquery'$(function(){    $('#stage01').css('backgroundCokor','red')    $('#stage02').css('backgroundCokor','blue')    $('#stage03').css('backgroundCokor','green')})

注意：import $ from 'jquery'是ECMAScript 6.0语法。

以上代码在index.html导入index.js运行会报错。

报错信息：Uncaught SyntaxError: Cannot use import statement outside a module

原因：在index.js中的import $ from 'jquery'是ECMAScript 6.0语法。

本例解决方式：借助webpack，在webpack.config.js导入。

3.安装webpack

3.1安装webpack

执行指令：npm install webpack webpack-cli –D

3.2在webpack_demo\目录下新建webpack.config.js

当前webpack.config.js配置：

module.exports = {    mode: 'development'}

3.3在webpack_demo\目录下配置package.json

在scripts节点新增：

"dev": "webpack"

当前package.json的scripts配置：

"scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "dev": "webpack"}

3.4在Terminal中运行指令打包

执行指令：npm run dev

实际执行：npm run webpack

3.5打包后默认生成在webpack_demo\dist的main.js中

3.6在index.html导入打包后js文件即添加如下导入

<script src="../dist/main.js"></script>

3.7运行index.html查看效果

 以上，每次修改内容后，均需要重新执行npm run dev才能生效。

4.自定义打包入口和出口

本例打包入口文件：webpack_demo\src\index.js

本例打包入口文件：webpack_demo\dist\bundle.js

4.1在webpack.config.js中配置

打包入口节点：entry

打包出口节点：output

配置：

entry: path.join(__dirname, './src/index.js'),output: {  path: path.join(__dirname, './dist'),  filename: 'bundle.js'},

4.2在index.html导入打包后js文件即添加如下导入

<script src="../dist/bundle.js"></script>

4.3运行index.html查看效果

 以上，每次修改代码均需重新运行npm run dev才能生效，没有热部署效果。

5.配置自动打包

5.1安装webpack-dev-server包

执行指令：npm install webpack-dev-server –D

5.2修改package.json中dev节点

将"dev": "webpack"替换掉

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8081"

注：--open 打开自动部署；--host 指定ip地址；--port 指定端口。

5.3在index.html导入打包后js文件即添加如下导入

<script src="/bundle.js"></script>

5.4解决启动不成功问题

5.4.1启动不成功日志信息，即在Project is running at:后无发布地址

 本例使用指令未指定版本号，即默认最新版本，是版本不匹配问题，当前版本如下：

"webpack": "^5.52.0","webpack-cli": "^4.8.0","webpack-dev-server": "^4.1.0"

本例使用指定版本进行体验。

5.4.2删除package.json中配置，重新执行如下指令

npm install webpack@4.46.0 webpack-cli@3.3.12 –Dnpm install webpack-dev-server@3.11.2 –D

5.4.3查看包都有哪些版本

npm view webpack versions  npm view webpack-cli versions  npm view webpack-dev-server versions

5.5运行成功日志信息

5.6运行成功自动启动页面

5.7在页面中点击src即可进入index.html页面

 以上自动打开后，需要再点击才能进入index.html页面。配置直接打开浏览器就进入index.html页面。

6.配置生成预览页面

6.1安装包

执行指令：npm install html-webpack-plugin@4.5.2 –D

6.2在webpack.config.js配置

配置插件，当前配置文件如下：

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const htmlWebpackPlugin = new HtmlWebpackPlugin({    template: './src/index.html',    filename: 'index.html'})module.exports = {    mode: 'development',    entry: path.join(__dirname, './src/index.js'),    output: {        path: path.join(__dirname, './dist'),        filename: 'bundle.js'    },    plugins: [htmlWebpackPlugin]}

6.3启动即跳转到index.html页面

以上，默认打包js文件，打包非.js文件需配置各类loader加载器。

7.配置打包css文件的loader

7.1安装包

执行指令：npm install style-loader@1.3.0 css-loader@3.6.0 -D

7.2在webpack.config.js配置规则

在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的module.exports配置如下：

7.3体验css

7.3.1在webpack_demo\src\css\目录下新建01cssdemo.css添加内容如下

#appCss{  background-color:orange;}

7.3.2在index.js中引入01cssdemo.css

import './css/01cssdemo.css'

7.3.3在index.html添加标签

<div><strong id="appCss">css体验</strong></div>

7.3.4效果

 

8.配置打包less文件的loader

Less是一个CSS预处理器，让CSS具有动态性，CSS赋予了动态语言的特性，如变量，继承，运算等。

8.1安装包

执行指令：npm i less-loader@6.2.0 less@3.13.1 -D

8.2在webpack.config.js配置规则

在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的rules新增：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

8.3体验less

8.3.1在webpack_demo\src\css\目录下新建02lessdemo.less添加内容如下

@my-cusColor: red;#appLess{    color: @my-cusColor;}

8.3.2在index.js中引入02lessdemo.less

import './css/02lessdemo.less'

8.3.3在index.html添加标签

<div><strong id="appLess">less体验</strong></div>

8.3.4效果

9.配置打包scss文件的loader

Sass是一个CSS预处理器，让CSS具有动态性，CSS赋予了动态语言的特性，如变量，继承，运算等。

9.1安装包

执行指令：npm i sass-loader@7.3.1 node-sass@4.14.1 -D

9.2在webpack.config.js配置规则

在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的rules新增：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

9.3体验scss

9.3.1在webpack_demo\src\css\目录下新建03scssdemo.scss添加内容如下

$my-cusColor: blue;#appScss{    color: $my-cusColor;}

9.3.2在index.js中引入03scssdemo.scss

import './css/03scssdemo.scss'

9.3.3在index.html添加标签

<div><strong id="appScss">scss体验</strong></div>

9.3.4效果

 

10.配置打包图片和文件的loader

10.1安装包

执行指令：npm i url-loader@2.3.0 file-loader@4.3.0 -D

10.2在webpack.config.js配置规则

在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的rules新增：

{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=5857' }

注：limit指定图片的大小，单位是字节(byte),只有小于limit字节的图片，才会被转为base64图片。

10.3体验加载图

10.3.1在webpack_demo\src\css\目录下添加内容如下01cssdemo.css添加样式

#myImage{  width: 100px;  height: 100px;  background:url('../images/orange.png');}

10.3.2在index.js中引入01cssdemo.css

import './css/01cssdemo.css'

10.3.3在index.html添加标签

<div >  <div><strong >图片体验</strong></div>  <div id="myImage"></div></div>

10.3.4效果

11.配置babel处理js文件中高级语法

babel被用来转译ECMAScript 2015+的高级语法至可兼容浏览器的版本。

11.1安装包

转换器指令：npm i babel-loader @babel/core @babel/runtime -D 

语法插件指令：npm i @babel/preset-env @babel/plugin-transform-runtime

@babel/plugin-proposal-class-properties –D

11.2在webpack_demo\目录新建babel.config.js

添加配置：

module.exports = {  presets: ['@babel/preset-env'],  plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']}

11.3在webpack.config.js配置规则

在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的rules新增：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

注：解析不包括导入模块node_modules下的js文件

11.4高级语法

11.4.1在webpack_demo\src\index.html中添加标签

<div ><div><strong >babel体验</strong></div><div><span >女孩子信息如下:</span></div><div ><span id="cup"></span></div><div ><span id="height"></span></div><div ><span id="weight"></span></div><div ><span id="aspect"></span></div></div>

11.4.2在index.js中导入css

import './css/01cssdemo.css'

11.4.3在index.js添加标签

class Girl{    static cup="C";    static height=160;    static weight =100;    static aspect='漂亮'}$("#cup").text('罩杯: '+ Girl.cup)$("#height").text('身高: '+ Girl.height)$("#weight").text('体重: '+ Girl.weight)$("#aspect").text('外貌: '+ Girl.aspect)

11.4.4效果

12.配置PostCSS

PostCSS是一个用JavaScript工具和插件转换CSS代码的工具。

12.1安装包

执行指令：npm i postcss-loader@4.3.0 autoprefixer@9.8.6 -D

12.2在webpack_demo\目录新建postcss.config.js

配置内容：

const autoprefixer = require('autoprefixer')module.exports = {    plugins: [autoprefixer]}

12.3在webpack.config.js配置规则

在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的rules新增：

{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }

注：在css配置后面新增postcss-loader即可。

12.4体验

12.4.1在webpack_demo\src\index.html中添加标签

<div><div><strong >PostCSS体验</strong></div><input type="text" placeholder="PostCSS体验"></div>

12.4.2在index.js中导入css

import './css/01cssdemo.css'

12.4.3在webpack_demo\src\css\目录下的01cssdemo.css添加样式

::placeholder {  color: blue;  font-size: medium;}

12.4.4效果

12.4.5 在没有使用postcss时在IE浏览器样式展现

12.4.6.使用postcss后在IE浏览器样式展现

13.配置Vue加载器

Vue.js渐进式JavaScript 框架。

13.1安装包

加载器执行指令：npm i vue-loader@15.9.8 vue-template-compiler@2.6.0 -D

Vue执行指令：npm i vue@2.6.0 -S

注：vue-template-compiler和vue版本保持一致

13.2在webpack.config.js配置规则

13.2.1导入插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

13.2.2配置插件

plugins: [new VueLoaderPlugin()]

13.2.3在module->rules->test节点中配置规则

注：关键字test表示匹配的文件类型；use表示对应要调用的loader。

当前webpack.config.js文件中的rules新增

{ { test: /\.vue$/, use: 'vue-loader' }

13.3在webpack_demo\src\components目录下新建App.vue文件

添加内容：

<template>  <div>    <div><strong>Vue体验</strong></div>    <div><span id="vueTiYan">展现App.vue信息</span></div>  </div></template><script></script><style scoped>#vueTiYan {  color: blue;  font: medium;}</style>

13.4在webpack_demo\src\index.html中添加标签

<div id="app"></div>

13.5在webpack_demo\src\index.js中导入App.vue

import Vue from 'vue'import App from './components/App.vue'const vm = new Vue({    el:'#app',    render: w => w(App)})

13.6效果

14.体验打包

14.1在package.json节点scripts中增加build指令

"build": "webpack -p"

14.2在Terminal中运行指令

执行指令：npm run build

14.3在webpack_demo\dist生成bundle.js和index.html

webpack_demo\dist下文件则是目标文件

14.4访问dist中的index.html效果

15.记录体验

比较完整的体验各个环节细节，有点意思。

2021年9月8日