Webpack 基本使用

2019-09-28  本文已影响0人  dawsonenjoy

模块化的由来

JS传值问题

在js当中,如果一个js文件的属性想要被另一个js文件获取到,那么只能通过window.属性将该属性设置为全局变量以后才能够被另一个文件读取,然而这样是件极其不安全的事,因为极有可能发生变量值被覆盖这样的麻烦事。为此在node.js中提出了一切皆模块的观念,即所有的静态文件都被看做是模块,每个模块可以通过module.exports暴露出值,也可以通过require(模块)获取别的模块保留的值,举例:

module.exports = {name:"aaa"};
// 将对象暴露出来
var data = require('./a.js');
// b.js中获取a.js暴露出来的内容
console.log(data);

此时b.js就可以获取a.js中指定的数据了,但是上面的这段代码如果直接在浏览器中是无法执行的,因为require是node里的关键词。此时就需要用到webpack将这段代码编译成浏览器能够执行的代码,执行命令为:webpack 入口文件(这里因为是b.js引用a.js的内容,所以是b.js) [生成的文件名,可选],然后就会生成一个bundle.js(根据配置也可能是别的名字,比如main.js)文件,里面将这两个文件进行了打包和加密,生成了一个新的文件,在html文件中引入这个bundle.js即可成功实现上面的效果

Webpack介绍

通过上面的问题我们可以知道webpack是一个静态资源打包工具,在webpack中一切皆模块,包括js、图片等所有静态文件都是模块,即模块化开发(参考:https://www.cnblogs.com/moxiaowohuwei/p/8692359.html),然后将这些模块根据需要打包成对应的bundle.js

功能

1.打包代码
2.压缩代码
3.版本兼容编译
4.搭建脚手架

安装

安装webpack前需要先配置好node.js环境,然后输入下面命令:

npm install webpack webpack-cli -g

安装完成后输入下面命令查看是否安装成功:

webpack -v
webpack-cli -v

简单使用

通过命令:

webpack 入口文件 [生成的文件名,可选]

即可将文件打包成对应的bundle.js文件。但是这种方式如果是对应多个文件的情况时,一个个文件加在参数后面将十分冗长,可以建议通过文件配置方式打包文件,参考下面项目使用步骤

项目使用步骤

1.创建一个项目文件夹,在文件夹下通过命令:npm init -y生成package.json文件,再输入命令:npm i -D webpack webpack-cli安装webpack和webpack-cli
2.创建一个文件夹名为modules存放所有的模块
3.在modules目录下创建各种js模块文件编写功能函数,并通过exports方法导出模块
4.在modules目录下创建main.js文件作为js文件的入口模块,并通过require方法获取模块,然后调用对应模块下的功能函数
5.创建webpack.config.js配置文件,并在当中配置entry属性(入口模块)和output属性(输出文件路径)等
6.在命令行输入命令:webpack,对文件资源进行打包(如果需要动态编译,则命令后面加上参数:--watch),最终会在对应目录下生成bundle.js文件
7.创建入口html文件并引用打包生成的js文件

webpack.config.js文件属性

举例:

module.exports = {
    entry: {
        main: './b.js',
        other: './c.js'
    },
    output: {
        filename: '[name].bundle.js',
        // [name]为entry对象里的属性名
        path: __dirname + '/dist'
        // __dirname为当前路径
    }
}

加载CSS文件

步骤

1.安装style-loadercss-loader模块:npm i -D style-loader css-loader
2.在webpack.config.js文件导出的属性当中添加如下的模块处理规则:

modules: {
    rules: [
    {
        test: /\.css$/,
        // 匹配所有CSS文件
        use: ['style-loader', 'css-loader']
        // 顺序是反过来,即先用css-loader处理,再用style-loader处理
    }
    ]
}

3.在需要使用CSS文件的地方通过import 'xxx.css'导入即可

加载SASS文件

步骤

1.安装:npm i -D sass-loader node-sass
2.加上对应的rule配置
3.在需要使用SASS文件的地方通过import 'xxx.sass'导入即可

加载图片文件

步骤

1.安装:npm i -D file-loader
2.加上对应的rule配置如下:

modules: {
    rules: [
    {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        // 匹配所有图片文件
        use: ['file-loader']
    }
    ]
}

3.在需要使用图片文件的地方通过url('xxx.xxx')导入即可

上一篇下一篇

猜你喜欢

热点阅读