认识webpack
webpack是一个静态模块化的打包工具
Webpack依赖于Node环境运行
安装
webpack webpack-cli
全局安装npm install webpack webpack-cli -g
局部安装npm install webpack webpack-cli -D
webpack 与 webpack-cli之间的关系
webpack基本使用
js实现简单的模块化
math.js 使用es module导出方式
// Es6 Module模块化导出
export function sum(num1, num2) {
return num1 + num2
}
format.js使用CommonJS导出方式
const aab = function () {
return 1112
}
// CommonJs导出方式
module.export = {
aab
}
index.js 导入并使用两个模块
import { sum } from './js/math.js'
const { aab } = require('./js/format.js')
console.log(sum(20, 30));
console.log(aab());
此时用过html将index.js导入并使用 并不能正常的运行
结论:在不依赖webpack等打包工具，使用js实现模块化是会有很多问题的
使用webpack
- 进入要打包的文件夹
- 命令行输入webpack 生成dist文件夹-mian.js打包文件
- 导入打包文件到html
注：在新建一个项目时，安装局部的webpack打包工具，尽量不要使用全局的
生成一个webpack配置文件package.json
npm init 手动输入相关信息
npm init -y 自动默认所有信息
使用局部webpack打包
安装局部webpack
生产时依赖：npm install webpack webpack-cli --save-dev/-D
开发时依赖: npm install webpack webpack-cli --save
安装好之后会有一个package-lock.json文件以及一个node_module文件夹
使用
直接执行webpack指令时 还是会默认使用全局的webpack
方式一： 执行 ./node_module/.bin/webpack （找到当前安装的webpack工具的webpack指令）
方式二： 执行 npx webpack
指定入口：--entry
指定出口： --output-path
方式三： 修改package.json 配置文件
"script":{
"build":"webpack"
}
执行脚本指令 npm run buile ： 会默认使用本地（局部）的webpack命令
webpack.config.js 配置文件
package.json 中webpack 会默认在webpack.config.js文件中读取配置
webpack.config.js
// node 导入path模块
const path = require('path')
// 这里必须使用CommonJS的导出方式
// 因为 webpack 依赖于node 环境 而node采用的是commonjs的模块化规范
// 如果使用 es module的导出方式在node环境中需要进行很多配置
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 使用path模块的resolve方法进行地址拼接
//__dirname当前文件夹的绝对地址
path: path.resolve(__dirname, './build'),
filename:'bundle.js'
}
}
更改webpack默认读取配置路径
修改package.json 配置
scripts:{"build":"webpack --config ***.config.js"}
webpack--loader的使用
loader是什么
上面了解了webpack打包工具的基本使用
webpack默认可以加载javascript 在开发过程中 我们不止需要加载js代码，还需要处理css、less、sass、图片等文件，webpack并不知道怎么对这些文件进行加载，所以这个时候需要使用loader将这些文件（或模块）源代码进行转换
load是webpack的扩展功能 webpack允许我们使用loader来处理文件
css-loader、style-loader
css-loader:读取css文件进行解析
style-loader：将css代码生成style标签 渲染到页面
安装loader：
npm install css-loader style-loader -D
loader使用
内联方式
在import导入css文件时使用css-loader！...
import "css-loader!../css/element.css"
CLI方式（webpack5舍弃）
--module-bind
配置方式（webpack.config.js）
同时使用多个loader加载时 自下而上（自右至左）进行加载
//配置module.rules中的loader
//加载css-loader
module{
rules:[
{
test:/\.css$/,
//写法1 loader的语法糖写法
loader:'css-loader'
//写法2
use:[
//自下而上加载 先加载完css才能使用style-loader 否则会报错
"style-loader",
"css-loader"
]
//写法3
{loader:"style-loader"}
{loader:"css-loader"}
}
]
}
less-loader
less预编译器-lessc处理工具
一般的浏览器都不能识别这些预编译器代码 所以在执行前必须要先将他们呢转换成css代码
less的预编译器工具less：首先需要安装less 他附带了less的处理工具lessc
npm install less -D
使用工具
npx lessc less文件名 css文件名
使用less-loader进行处理
安装：
npm install less-loader -D
使用：
//webpack.config.js配置文件
module:{
rules[
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
postcss-loader
认识postCss
PostCss是一个通过JavaScript来转换样式的工具
可以进行css的转换和适配 例如自动添加浏览器前缀、css样式重置等 需要借助PostCss的插件
直接安装并使用PostCss
PostCss和Webpack一样 都是前端开发的一个工具
安装：npm install postcss postcss-cli -D
安装自动添加前缀插件：npm install autoprefixer -D
使用：npx postcss --use autoprefixer -o 转换后css文件名 转换前css文件名
依赖webpack使用PostCss-postcss-loader
安装：npm install postcss-loader -D
使用：
module{
rules[
{
test:/\.(css|less)/,
use:[
'style-loader',
'css-loader',
//配置postcss-loader插件
{
loader:'postcss-loader',
options:{
postcssOptions:{
//加载插件
plugins:[
require('autoprefixer')
]
}
}
}
]
}
]
}
可以将插件配置抽取到一个单独的配置文件 postcss.config.js 中
//webpack.config.js
module{
rules[
{
test:/\.(css|less)/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
}
//postcss.config.js
module.exports = {
plugins:[
require('autoprefixer')
]
}
postcss-preset-env插件
它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境 添加所需的polyfill
内置了 autoprefixer
安装：npm install postcss-preset-env -D
moudle.exports = {
plugins:[
require('postcss-preset-env')
//使用postcss插件时也可之间传入字符串
"postcss-preset-env",
]
}
