webpack

它是一个前端资源加载/打包工具，根据模块的依赖关系（如a.js依赖b.js）进行静态的分析，并依据规则生成对应的静态资源。

webpack的4个核心内容

entry 入口
output 输出
loader 加载器
plugins 插件

模块化的概念：

webpack认为所有的文件都是模块（html除外）
webpack只能打包js和json文件

什么是webpack ?

Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的所有资源文件(js/json/css/img/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析，生成对应的静态资源

理解Loader

Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
它本身是一个函数，接受源文件作为参数，返回转换的结果
loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 css-loader。(下面css的打包我们将用到)

配置文件

webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

安装

（在安装webbpack前，本地环境需要安装node.js）

npm install webpack -g//全局环境下安装webpack

npm install webpack --save-dev  //局部安装

npm install webpack@4.28.4 // 指定版本号的局部安装

webpack -v //查看安装版本

打包 js & json

(package.json) 创建package.json配置文件,包含项目名称和版本号，使用npm安装webpack ，安装完毕后会更新显示目前安装的版本号

{
	"name": "webpack_text",
	"version": "1.0.0",
}

（文件目录）

我们可以通过手动输入命令

//更高版本的支持命令：webpack 源目录 -o 新目录

 webpack src/js/entry.js -o dist/js/bundle.js

亦或者使用配置文件 webpack.config.js

配置文件（webpack.config.js）

含义：webpack在执行命令的时候先在当前目录下找配置文件（webpack.config.js）找到对应的配置后再执行里面的操作。

const path = require('path');  //node 内置的模块用来设置路径的

module.exports = {
  entry: './src/js/entry.js',  //入口 当前项目的主文件
  output: {                    //出口 输出的配置
    filename: 'bundle.js',     //输出的文件名
    path: path.resolve(__dirname, 'dist/js/')  
  }
};
//直接可以在命令行输入 webpack来实现相同的效果

其他部分的代码：

(entry.js)

import {foo,bar} from './math';
//汇入主模块
import data from '../data/test.json';

document.write('进来了~'+'<br/>');
document.write(foo(3)+'<br/>');
document.write(bar(3)+'<br/>');
document.write(JSON.stringify(data)+'<br/>');   //！！！

(math.js)

export function foo(x){
	return x*x;
}
export function bar(x){
	return x ** x;
}

(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack</title>
</head>
<body>
	<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

(test.json)

{
	"name":"xiaoming",
	"age":39
}

打包 css

在这里插入图片描述（文件目录）
安装样式的loader

npm install css-loader style-loader --save-dev   //css

npm install file-loader url-loader --save-dev    //图片

// url-loader是对象file-loader的上层封装，使用时需配合file-losder使用

如何使用loader？
我们可以在webpack的官网上查找loaders中要使用的配置文件，直接可以将它引用过来

（webpack.config.js）

const path = require('path');  //node 内置的模块用来设置路径的

module.exports = {
  entry: './src/js/entry.js',  //入口 当前项目的主文件
  output: {                    //出口 输出的配置
    filename: 'bundle.js',     //输出的文件名
    path: path.resolve(__dirname, 'dist/js/')  
  },
   module: {
   	 rules: [
      {
        test: /\.css$/,//正则 $以 xxx结尾//一旦匹配成功就使用
        use: [ 'style-loader', 'css-loader' ]//style-loader可以把css样式动态添加到应添加的标签中
                                             // css-loader只负责加载css模块
        }
    ]
  }
};

（entry.js）

import base from '../css/test.css';

//样式不需要定义变量 只需要引入就可以啦

在写代码的过程中我们可能会遇见这样的提示警告

这个需要在webapack命令后加上（这对应了webpack的两种模式，一个是开发，一个是生产）

--mode development
--mode production

两种模式的对比：

在开发时使用 webpack 打包后不压缩，所以只需要在 webpack 打包命令中加上 --mode development 即可。
如果没有 mode development 就会自动使用 production 模式，所有打包的代码将会是压缩过的，没办法调试。

webpack (js&json&css的打包)

webpack

打包 js & json

打包 css

猜你喜欢