VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 编程开发 > Java教程 >

  • 070_Webpack

什么是Webpack

Webpack 是一个前端资源加载/打包工具。
它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

Webpack安装

全局安装

npm install -g webpack webpack-cli
或

cnpm install -g webpack webpack-cli

image.png
image.png

查看版本号

webpack -v

image.png

初始化项目

创建项目文件夹webpack

image.png

初始化项目

npm init -y

image.png

创建文件夹src

image.png

src下创建准备合并的js文件

common.js

exports.info = function (str) {
    // 控制台输出
    console.log(str);
    // 浏览器输出
    document.write(str);
}

utils.js

exports.add = function (a, b) {
    return a + b;
}

src下创建入口文件main.js

const common = require('./common.js');
const utils = require('./utils.js');
common.info('Hello world!' + utils.add(100, 200));

js打包

配置文件webpack.config.js

image.png

// 导入path模块
const path = require("path"); //Node.js内置模块
// 定义js打包的规则
module.exports = {
    // 入库函数从哪里开始进行编译打包
    entry: './src/main.js', //配置入口文件
    // 编译成功以后把内容输出到哪里去
    output: {
        // 输出指定目录
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前项目根目录
        // 合并的js文件
        filename: 'bundle.js' //输出文件
    }
}

以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

执行打包命令或配置package.json执行打包命令

执行打包命令

webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩

package.json配置打包命令

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

运行npm命令执行打包

npm run dev

image.png

项目下创建index.html，引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>

浏览器中查看index.html

css打包

安装style-loader和css-loader



Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件

  • css-loader 是将 css 装载到 javascript
  • style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader

webpack.config.js添加打包规则

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

// 导入path模块
const path = require("path"); //Node.js内置模块
// 定义js打包的规则
module.exports = {
    // 入库函数从哪里开始进行编译打包
    entry: './src/main.js', //配置入口文件
    // 编译成功以后把内容输出到哪里去
    output: {
        // 输出指定目录
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前项目根目录
        // 合并的js文件
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

src下创建style.css

body{
    background:pink;
}

main.js导入style.css

const common = require('./common.js');
const utils = require('./utils.js');
require('./style.css');
common.info('Hello world!' + utils.add(100, 200));

运行打包命令

npm run dev

浏览器中查看index.html

https://www.cnblogs.com/wl3pb/p/15389059.html
出　　处：

相关教程