本地安装webpack-------打包工具 ------> 输出结果（JS模块）
1-新建项目文件夹
2-初始化依赖 yarn init -y
3-命令 yarn add webpack webpack-cli -D
4-创建src/index.js(零配置下必须为index.js) 运行 webpack 0配置下，系统自动生成 dist/main.js
手动配置 webpack
1-创建配置文件 webpack.config.js
2-设置配置文件
const path=require('path')
module.exports={
mode:'development',
// 入口
entry:'./src/index.js',
output:{
filename:'bundle.[hash:8].js', //添加[hansh] 防止内存覆盖也缓存问题
path:path.resolve(__dirname,'dist') //解析出一个绝对路径 \MYPRO\dist
}
}
3-再运行 webpack 生成dist/bundle ，得到新的解析包
4-由于是 yarn init -y 初始化 package.json
需要手动添加"scripts":{"build":"webpack --config webpack.config.js" }，添加脚本指令
5-使用自定指令运行打包 npm run build
- webpack-dev-server安装使用
1-yarn add webpack-dev-server -D
2-配置服务器的配置
devServer: {
//开发服务器配置
port:3000,
progress:true,
contentBase:'./dist' //打包后输出到的目录
}
- 使用HtmlWebpackPlugin插件
(Plugins是webpack的支柱功能，可以解决 loader 无法实现的其他事)
（该插件用于 npm run build 以设定模板和index.js =>打包压缩生成新的 html 页面）
1-在config.js 文件顶部引入 let HtmlWebpackPlugin=require('html-webpack-plugin');
2- yarn add html-webpack-plugin -D 安装插件
3-在 config.js添加plugins:[ ]
plugins:[
new HtmlWebpackPlugin({
filename:'index.html', //设置生成名称
template:'./index.html' //选择模板
}),
],
4-此时再运行打包 npm run build 会在/dist目录出现，一个根据模板生成的index.html
出现.png
-样式处理 loader
loader可以将模块的代码进行转换，loader可以将其他语言转换成javascript,甚至直接在javascript语言中import css
安装：yarn add css-loader style-loader -D
作用：整合所有的同类型文件，例N个 css，整合成一个css文件；
作用：css-loader: 解析@import语法；style-loader:在页面生成l<link>标签插入<head></head>，完成挂载
// 引入文件模块
//添加配置`webpack.config.js`:
module:{
rules:[ //规则
{
test: /.css$/,
use: ["style-loader","css-loader"]
}
]
}
-抽离css样式插件-mini-css-extract-plugin
1-安装：yarn add mini-css-extract-plugin -D
2-引入 :webpack.config.js顶层引入插件语句 const MiniCssExtract= require('mini-css-extract-plugin');
3-配置:在plugins:[ ]和moulde:{}中配置
plugins:[
new HTMLWebpackPlugin({ title: "这是我设置的title", template: "./src/index.html",filename:'myindex.html' }),
new MiniCssExtractPlugin({
//设置抽离出的 css 名称 /位置默认在dist
filename:'main.css'
})
],
// 引入文件模块
module:{
rules:[ //规则
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
]
}
4-重新打包后在dist中得到mian.css抽离后的文件，抽离可视为把零散的css文件内容进行整合；
minicssextractPlugin.png
-使用babel处理高级JS语法
实现ES6转ES5
1.安装： yarn add babel-loader @babel/core @babel/preset-env -D
暂略....
网友评论