Webpack

最新推荐文章于 2024-09-20 10:08:33 发布

北极星小王子

最新推荐文章于 2024-09-20 10:08:33 发布

阅读量189

点赞数

分类专栏：前端文章标签： vue webpack

本文链接：https://blog.csdn.net/weixin_41835916/article/details/108438905

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

Webpack

1、模块化
2、Webpack基本使用过程
3、Webpack.config.js和package.json
4、webpack中使用css的文件配置

1、模块化

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="aaa.js" type="module"></script>
    <script src="bbb.js" type="module"></script>
    <script src="mmm.js" type="module"></script>
</body>
</html>

aaa.js：

var name = '小明'
var age = 18
var flag = true

function sum(num1,num2) {
    return num1 + num2
}

if(flag){
    console.log(sum(20,30))
}

// 1. 导出方式一
export {
    flag,sum
}

// 2. 导出方式二
export var num1 = 1000;
export var height = 1.88

// 3. 导出函数/类
export function mul(num1,num2) {
    return num1 + num2
}
export class Person{
    run(){
        '在奔跑'
    }
}

// 4. export default
const address = '北京'
export default address

bbb.js：

import {sum} from "./aaa.js";

var name = '小红'
var flag = false

console.log(sum(100,200))

mmm.js：

import {flag,sum} from "./aaa.js";

if(flag){
    console.log('小明是天才')
    console.log(sum(10,20))
}

import {num1,height} from "./aaa";
console.log(num1)
console.log(height)

// 导入函数
import {mul} from "./aaa.js";
console.log(mul(1,2))

// 导入对象
import {Person} from  "./aaa.js";
const p = new Person();
p.run()

import aaa from "./aaa.js"
console.log(aaa)

// 统一全部导入
import * as aaa from './aaa'
console.log(aaa.flag)

2、Webpack基本使用过程

目录结构：
mathUtils.js：

function add(num1,num2) {
    return num1 + num2
}

function mul(num1,num2){
    return num1 * num2
}

module.exports = {
    add,
    mul
}

info.js：

export const name = 'why';
export const age = 18;
export const height = 1.65;

main.js：

// 1. 使用 commonJs 的模块化规范
const {add,mul} = require('./mathUtils.js')

console.log(add(20,30));
console.log(mul(20,30));

// 2. 使用 ES6 的模块化的规范
import {name,age,height} from "./info";

console.log(name);
console.log(age);
console.log(height)

打包：webpack ./src/main.js -o ./dist/bundle.js
引入打包后的 js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

运行结果：

在这里插入图片描述

3、Webpack.config.js和package.json

1、在上个栗子的基础上，执行 npm init -y，一路回车
2、webpack.config.js：

const path = require('path')

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

3、package.json：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4、执行打包命令：npm run build
在这里插入图片描述

4、webpack中使用css的文件配置

1、通过 npm 安装需要使用的 loader：
npm install --save-dev css-loader
npm install --save-dev style-loader
2、在 webpack.config.js 中的 modules 关键字下进行配置

const path = require('path')

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                use:[ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

3、创建 normal.css 文件：

body {
    background-color: red
}

4、引入 normal.css 文件：

const {add,mul} = require('./js/mathUtils.js')

console.log(add(20,30));
console.log(mul(20,30));

import {name,age,height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 依赖 css 文件
require('./css/normal.css')