webpack学习笔记

最新推荐文章于 2022-11-27 10:31:32 发布

zhang_dawei666

最新推荐文章于 2022-11-27 10:31:32 发布

阅读量460

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/xiangguiwang/article/details/106747601

前端专栏收录该内容

3 篇文章

订阅专栏

简介

手写的typescript、less、jpg===》Loader===》js、css、png静态资源文件。

webpack 里，一张图片、一个css、一个字体都会被称为模块。

webpack 作用是处理模块间的关系，并把他们进行打包。

举例

加载 css 大多通过＜link＞标签引入 css 文件，而在 webpack 里，直

接在一个.js 文件中导入，比如：

import ’ src/styles/index . css ’;

组成

webpack 的主要适用场景是单页面富应用（ SPA ）。 SPA 通常是由一个HTML文件和一堆按需加载的 js 组成，它的 html 结构可能会非常简单。

导入导出模块

export 和 import 是用来导出和导入模块的。一个模块就是一个 js 文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。

导出配置文件

//config .js

var Config = {

version:’ 1. 0. 0 ‘

}

export { Config };

或

II config .j s

export var Config = {

version:’ 1. 0. 0 ’

};

导出一个函数

export function add(a , b) {

return a + b;

};

使用模块

import { Config } from ’ . /config . j s ’；

import { add } from ’ . /add.js ’;

console .log(Config) ; //{version:’ 1. 0. 0 ’ }

console .log(add(l , l)); // 2

使用 npm 安装了一些库

import Vue from ’vue ’;

import $ from ’ j query ’;

分别导入了 Vue 和 jQuery 的库，并且命名为 Vue 和$

安装 webpack 与 webpack-dev-server

cnpm init

cnpm install webpack --save-dev

cnpm install webpack-dev server --save –dev

package.json 如下所示

webpack 总结重点

webpack 就是一个.js 配置文件，webpack 配置中最重要也是必选的两项是入口（ Entry）和出口（ Output ）。入口的作用是告诉webpack 从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件存储位置和文件名。

运行webpack服务

在 package.json的 scripts 里增加一个快速启动 webpack-dev-server 服务的脚本：

“scripts ”：｛

“test”:”echo \”Error: no test specified\”&& exit l ”,

“dev ”：” webpack-dev-server -open --config webpack.config.js ”

}

webpack helloworld

webpack 配置中最重要也是必选的两项是入口（ Entry）和出口（ Output ）。入口的作用是告诉webpack 从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件存储位置和文件名。

第一步新建main.js

进入文件夹project，运行cnpm init ,新建main.js

作用:作为webpack.config.js的输入文件。

第二步修改package.json 指定运行命令

"scripts": {
"dev": "webpack-dev-server --open --config webpack.config.js"
},

第三步写webpack-dev-server 运行时指定的文件。本例子是webpack.config.js

var path = require('path')



var config ={



    entry:{

        main:'./main'

    },

    output:{

        path:path.join(__dirname,'aaa'),

        publicPath:'aaa',

        filename:'result.js'

    }





};



module.exports = config;

path:The output directory as **absolute path** (required)

pubPath:The `publicPath` specifies the public URL address of the output files when referenced in a browser.

注意：当运行webpack --progress --hide-modules .这时result.js 会生成到aaa目录

第四步写HTML文件。包含result.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">

        hello world

    </div>



<script type="text/javascript" src="/aaa/result.js"></script>

</body>

</html>

第五步运行cnpm run dev

运行效果

webpack 加载器功能

在webpack 的世界里，每个文件都是一个模块，比如css 、.js .html、 .jpg、 .less 等。对于不同的模块，需要用不同的加载器（ Loaders ）来处理，而加载器就是 webpack 最重要的功能。通过安装不同的加载器可以对各种后缀名的文件进行处理，比如现在要写一些 css 样式，就要用到style-loader 和 css-loader 。

安装css-loader、style-loader

npm install css-loader --save-dev

npm install style-loader --save-dev

当 webpack 编译过程中遇到 require（）或 import 语句导入一个后缀

名为 .css 的文件时，先将它通过 css-loader 转换，再通过 style-loader 转换，然后继续打包。

例子

在 demo 目录下新建一个 style .css 的文件，并在 main.js 中导入：

/* style . css */

#app{

font-size : 24px ;

color : #f50 ;

}

// main.js

import './style.css';

document.getElementById('app').innerHTML="i love beijing"

重新执行 cnpm run dev 命令，可以看到页面中的文字已经变成红色，

css 是通过 JavaScript 动态创建＜style>标签来写入的，这意味着样式代码都已经编译在了 main .js 文件里，但在实际业务中，可能并不希望这样做，因为项目大了样式会很多，都放在 JS 里太占体积，还不能做缓存。

这时就要用到 webpack 最后一个重要的概念一一插件（ Plugins ）。

webpack 插件功能

通过 CNPM 安装 extract-text-webpack-plugin 插件：

cnpm install extract-text-webpack-plugin --save-dev

中间总结

只要搞清楚入口（ Entry ）、出口（ Output）、加载器（ Loaders ）和插件（ Plugins ）这 4 个概念，使用起来就不那么困惑了。

vue-loader

在 webpack 中使用 vue-loader 就可以对.vue 格式的文件进行处理。