一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
指定依赖包
指定包是取决于所开发的项目，需要在package.json文件中分为两种包进行选择：
- “dependencies”键下的这些包都是在你的开发环境和生产环境都所需要的。
- “devDependencies”键下的包只是在开发和测试中所需要的
手动编辑package.json文件
package.json可以手动进行编辑。我们需要在包的dependencies对象中创建一个属性用来指出你添加的依赖。 例如下面的项目中，在开发环境和主要的生产环境中使用包vue的版本3.0.0，而在开发环境中使用包webpack的版本5.71.0
{
"name": "my_package",
"version": "1.0.0",
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies" : {
"webpack": "^5.71.0"
}
}
--save和--save-dev
- 在我们下载新的依赖包时，添加-save会把依赖包的名称添加到package.json文件dependencies键下；添加-save-dev则添加到package.json文件到devDependencies键下。
- dependencies是运行时的依赖，而devDependencies是我们开发时的依赖。
webpack作为模块加载和打包神器
安装node就有npm了，用npm安装webpack
npm i webpack -g 安装全局的webpack
到项目目录下，npm init -y 初始化模块
npm i webpack -D 安装项目局部的webpack，-D是--save-dev的意思
–save-dev 是添加到 package.json 文件 devDependencies 键下
dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的
webpack 入口文件名 最后输出到哪个文件的文件名，例如：
webpack A.js B.js
那么就会编译A.js，输出到B.js
webpack只能处理JavaScript，处理其他类型的文件，需要安装几个包
npm install css-loader style-loader
假设有个一个abc.css文件，里面定好了样式
那么修改A.js
require("!style-loader!css-loader!./abc.css");
document.write(require("./C.js"));
再打包一次
webpack A.js B.js
会出现一个C.js
配置webpack.config.js
module.exports = {
entry: '入口文件的路径',
output: {
path:__dirname,
filename: '最后输出到哪个文件的文件名'
},
module: {
rules: [{
test: '处理什么格式的文件',
use:[
{
loader: '依赖包'
}
]
}
]
}
};
模块化
import $ from "jquery" // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖
loader加载器打包非js模块，比如：
less-loader：打包.less相关文件
sass-loader：打包.scss相关文件
url-loader：打包处理css中与url路径相关的文件
webpack打包处理过程：
先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错
如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错
加载器的使用
npm i style-loader css-loader -D // 安装处理css文件的loader
在webpack.config.js的module -> rules数组中，添加loader规则，例如：
module: {
rules: [
{
test: /\.css$/, use: ["style-loader","css-loader"]
}
]
}
注意：
test表示匹配的文件类型，use表示要调用的loader
use数组中指定的loader顺序是固定的，调用顺序是从后往前调用的
less loader
npm i less-loader less -D
test: /.less$/, use: ["style-loader","css-loader","less-loader"]
先把less解析为css文件，然后再解析css文件
scss loader
npm i sass-loader node-sass -D
test: /.scss$/, use: ["style-loader","css-loader","sass-loader"]
打包样式表的图片和字体
npm i url-loader file-loader -D
test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=1024"
limit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片
打包js高级语法
安装babel转换器相关的包
npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D
配置babel.config.js并初始化
module.exports = {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime","@babel/plugin-proposal-properties"]
}
配置webpack.config.js
test: /.js$/, use: "babel-loader", exclude: /node_modules/
excludes是排除项，表示babel-loader不需要处理node_modules中的js文件
配置postCSS，自动添加css兼容性
npm i postcss-loader autoprefixer -D
配置postcss.config.js，并且初始化
const autoprefixer = require("autoprefixer") // 导入插件
module.exports = {
plugins: [autoprefixer] // 加载插件
}
配置webpack.config.js
test: /.css$/, use: ["style-loader","css-loader","postcss-loader"]
导入vue单文件组件
import App from "./App.vue"
安装处理vue单文件的loader
npm i vue-loader vue-template-compile -D
添加loader配置文件
处理vue文件的loader需要VueLoaderPlugin插件
const VueLoaderPlugin = require("vue-loader/lib/plugin");
test: /.vue$/, loader: "vue-loader"
plugins: [
new VueLoaderPlugin()
]
