webpack(系列一)

时间：2021-03-06 14:42:18 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：sso expand back round 创建 es6语法 deb pts no-repeat

### webpack 介绍

* 什么是webpack<https://www.webpackjs.com/>
  * Webpack是一个模块打包器(bundler)。
  * 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
  * 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 五个核心概念
  * Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  * Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
  * Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件
  * Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩，
  * Mode：模式，有生产模式 production (压缩)和开发模式 development 
* 理解 Loader
  * Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
  * Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
  * loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 less-loader。
* 理解 Plugins
  * 插件可以完成一些loader不能完成的功能。
  * 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* 配置文件(默认)
  * webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

1. import ... from 模块导入

npm init 包名（初始化），自动生成一个package.json文件,

npm i webpack webpack-cli --save-dev （局部安装）

npx webpack index.js (webpack将index.js文件编译打包)，自动生成dist文件夹--》main.js的打包文件

index.js

// ES Moudule 模块引入方式
import Header from ‘./header.js‘;
import Sidebar from ‘./sidebar.js‘;
new Header();
new Sidebar();
new Content();

header.js

function Header() {
    var dom = document.getElementById(‘root‘);
    var header = document.createElement(‘div‘);
    header.innerText = ‘header‘;
    dom.append(header);
}

exports.default  Header;

sidebar.js

function Sidebar() {
    var dom = document.getElementById(‘root‘);
    var sidebar = document.createElement(‘div‘);
    sidebar.innerText = ‘sidebar‘;
    dom.append(sidebar);
}

exports.default  Sidebar;

index.html，引入打包之后的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是最原始的网页开发</title>
</head>
<body>
    <p>这是我们的网页内容</p>
    <div id=‘root‘></div>
    <script src=‘./dist/main.js‘></script>
</body>
</html>

此时页面可以注册显示

注；export ...from 是es6语法，浏览器不支持，需要通过webpack解析成浏览器支持的语法.

webpack模块打包工具，将所有的模块打包到一个文件

webapck支持也cmmonJs模块引入规范

// webpack 模块打包工具
// js 模块打包工具 -> 

// import Header from ‘./header.js‘;
// import Sidebar from ‘./sidebar.js‘;
// import Content from ‘./content.js‘;

var Header = require(‘./header.js‘);
var Sidebar = require(‘./sidebar.js‘);
new Header();
new Sidebar();

function Header() {
    var dom = document.getElementById(‘root‘);
    var header = document.createElement(‘div‘);
    header.innerText = ‘header‘;
    dom.append(header);
}
//导出
module.exports = Header;

2.webapck安装方法

npm init -y 初始化包，自动生成一个package.json文件

npm install webpack webpack-cli -g //全局安装,作为指令使用

npm install webpack webpack-cli -D //本地安装,作为本地依赖使用

注；不建议全局安装webpack, 每个项目的webpack版本都不一样，会发生错乱

卸载。 npm uninstall webpack webpack-cli -g

webpack -v 版本(全局查询)

npx webpack -v(局部查询)

npm i webpack@4.2.5 webpack-cli -D 安装特定版本

3. webpack配置文件webpack.config.js

3.1. 配置出入口，此时运行打包命令， npx webpack，即可打包，后面不需追加入口文件，因为，webpack配置了入口和出口。打包后的文件

dist-->bundle.js

//node内置核心模块，用来设置路径。
const path = require(‘path‘);
//只能使用 CommonJS 规范暴露
module.exports = {
    // 入口文件配置
    entry: ‘./src/index.js‘,
    // 输出配置
    output: {
        // 输出文件名（打包文件名）
        filename: ‘bundle.js‘,
        //输出文件路径配置，dist文件夹，打包之后的路径dist-->bundle.js
        path: path.resolve(__dirname, ‘dist‘)
    }
}

第二种的打包命令，在package.json中的script配置命令，执行npm run bundle（底层执行了npx webpack）, 即可打包文件了

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}

3.2，打包模式，

webpack默认是配置production环境，他会压缩bundle.js打包文件，开发环境不会

//node内置核心模块，用来设置路径。
const path = require(‘path‘);
//只能使用 CommonJS 规范暴露
module.exports = {
    // 开发环境
    mode: ‘development‘,
    // 入口文件配置
    entry: ‘./src/index.js‘,
    // 输出配置
    output: {
        // 输出文件名（打包文件名）
        filename: ‘bundle.js‘,
        //输出文件路径配置，dist文件夹，打包之后的路径dist-->bundle.js
        path: path.resolve(__dirname, ‘dist‘)
    }
}

* webpack能够编译打包 js 和 json 文件
* 能将 es6 的模块化语法转换成浏览器能识别的语法
不能编译打包 css、img 等文件

打包样式文件中的图片资源

图片文件 webpack 不能解析，需要借助 url-loader编译解析

两张资源图片:
- 小图, 小于8kb: src/images/vue.png
- 大图, 大于8kb: src/images/react.jpg

在 less 文件中通过背景图的方式引入图片

.react {
  width: 200px;
  height: 200px;
  background: url(‘../images/react.png‘) no-repeat;
  background-size: cover;
}
?
.vue {
  width: 200px;
  height: 200px;
  background: url(‘../images/vue.png‘) no-repeat;
  background-size: cover;
}

安装 loader

  > npm install file-loader url-loader --save-dev

补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

webpack.config.js 配置 loader

module.exports = {
    .
    .
    .
    module: {
        rules: [
            .
            .
            .
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: {
                        limit: 8192,                    // 8kb以下的图片会 base64 处理
                        outputPath: ‘images‘,           // 文件本地输出路径
                        publicPath: ‘../build/images‘,   // 图片的url路径，相对打包后的js文件
                        name: ‘[hash:8].[ext]‘,         // 修改文件名称和后缀 
                    }
                }
            },
        ]
    }
?
}

运行指令 npm run bundle

webpack(系列一)

标签：sso expand back round 创建 es6语法 deb pts no-repeat

原文地址：https://www.cnblogs.com/fsg6/p/14488685.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行