webpack安装和初始

最新推荐文章于 2024-06-15 10:25:41 发布

xuhang139

最新推荐文章于 2024-06-15 10:25:41 发布

阅读量224

点赞数 1

分类专栏： webpack框架文章标签： webpack

本文链接：https://blog.csdn.net/xuhang139/article/details/68946192

版权

webpack框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用webpack 前需要安装node.js 通过node.js自带的npm工具来下载安装webpack

安装

win+r 打开命令行工具输入：

D:\>mkdir webpack-test

新建项目
进入项目文件夹

D:\>cd webpack-test

D:\webpack-test>

初始化npm

D:\webpack-test>npm init

一路回车
这里写图片描述
在本地安装webpack

D:\webpack-test>npm install webpack --save-dev

安装完成
这里写图片描述
完成后会在项目文件夹下出现node_modules文件夹和packge.json文件

使用

在项目文件夹下新建入口文件hello.js模块文件world.js和HTML文件
这里写图片描述
hello.js内容：

require('./world.js');
function hello(){
    alert('hello');
}
hello();

world.js内容：

function world(){
    alert('world');
}
world();

index.html内容：

<<!DOCTYPE html>
<html>
<head>
    <title>webpack test</title>
    <script src="hello.bundle.js"></script><!--调用打包后的js代码-->
</head>
<body>

</body>
</html>

命令行执行：

D:\webpack-test>webpack hello.js hello.bundle.js

完成后会显示打包hash码,webpack版本，打包所用时间等
这里写图片描述
在浏览器打开index.html文件

关于webpack的loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

先来看看 loader 有哪些特性？

Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
Loader 可以同步或异步执行。
Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
Loader 可以接受参数，以此来传递配置项给 loader。
Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
Loader 可以通过 npm 发布和安装。
除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
Loader 可以访问配置。
插件可以让 loader 拥有更多特性。
Loader 可以分发出附加的任意文件。
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。

按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

在引用 loader 的时候可以使用全名 json-loader，或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。

引用css-loader和style-loader
新建style.css文件：
这里写图片描述
style.css内容：

body{background: red}

想要引用css:
1.需要在webpack安装style-loader和css-loader：

  D:\webpack-test>npm install css-loader style-loader

2.在入口文件hello.js调用style.css文件并指定css和style的loader

require('./world.js');
require('style-loader!css-loader!./style.css')
function hello(){
    alert('hello');
}
hello();

3.再次打包

 D:\webpack-test>webpack hello.js hello.bundle.js

浏览器打开index.html
这里写图片描述

xuhang139

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack安装和初始

使用webpack 前需要安装node.js 通过node.js自带的npm工具来下载安装webpack安装win+r 打开命令行工具输入：D:\>mkdir webpack-test新建项目进入项目文件夹D:\>cd webpack-testD:\webpack-test>初始化npmD:\webpack-test>npm init一路回车在本地安装webpackD:\webpack
复制链接

扫一扫