webpack4.0详细 从0到1
作者：互联网
什么是webpack，模块打包机，功能就是通过入口将所有得依赖关系打包成静态资源。
功能：
1.实现代码得转换（es6转es5，css转换）
2.文件优化（压缩代码体积，合并文件等）
3.代码分割（公共模块得抽离，路由懒加载）
4.模块合并（功能分类合并模块）
5.自动刷新（热更新）
6.代码校验
7.打包后自动发布
1.Webpack 安装（找一个空文件夹）
1、npm init -y（也可以不加y）后面添加 -y参数，帮助我们自动进行确认，直接生成项目
2、npm install webpack@4.0.0 webpack-cli -D
注：这里不推荐全局安装，全局和局部都装了得话，webpack命令会使用全局得得webpack,而npm使用得是局部得webpack,这就有可能导致构建失败
2.1、我安装得时候出现了问题npx webpack -v 没反应也没报错，可以分布装
npm install webpack@4.0.0 -g
npm install webpack-cli -D
2.打包指令npx webpack
npx webpack 执行得是modules中.bin文件夹下得webpack.cmd
当前文件夹下插好node.exe，如果不存在，就执行…\webpack\bin\webpack.js
查看webpack.js中会发现必须依赖于webpack-cli，所以得安装!
接下来，我们创建一个src文件夹，里面创建index.js，里面随便输入，执行npx webpack，会发现打包到dist文件夹中了
3.webpack得基础配置webpack.config.js。默认得是0配置比较弱
注意：如果要改名改成其他得 abc.js,
1.打包执行npx webpack --config abc.js
2.写个脚本，在package.json 中加入
“scripts”: {
“build”: “webpack --config webpack.config.js”
},然后运行npm run build
let path=require("path"); //内置模块，相对路径解析成绝对路径
module.exports={
mode:"development", //模式默认两种 production 开发 development(代码不压缩)
entry:"./src/index.js", //入口
output:{
filename:"bundle.js", //打包后得文件名
path:path.resolve(__dirname,'dist'), //路径必须是绝对路径,__dirname当前目录下，不加也可以
}
}
4.webpack-dev-server 服务 npm i webpack-dev-serve -g
这是一个小型node.js express服务器，用来实现一个静态服务
2个功能
1.自定刷新inline 和 iframe
2.自动打包（打包在内存中）
写入脚本
package.json
"scripts": {
"serve": "webpack-dev-server"
},
注意：webpack webpack-cli webpack-dev-server得版本会有冲突，下面是我用得
接下来npm run serve 成功
配置webpack-dev-server
webpack-config.js
// 开发服务得配置 webpack-dev-serve
devServer: {
prot: "4000", //端口号
progress: true, //进度条
contentBase: path.resolve(__dirname, "dist"), //指向这个目录
compress: true, //自动打开浏览器
},
5.增加html模板 html-webpack-plugin
上术操作下来，打包后是没有index.html得。
安装插件：npm i html-webpack-plugin -D
功能：1.创建生成入口文件html
2.生成哈希值防止缓存
webpack-config.js
// 插件
顶部引入 let HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
// html 模板 pub 静态资源文件夹，打包后自动根据pub/index.html，生成indexxxxx.html在dist中
new HtmlWebpackPlugin({
template: "./pub/index.html",
filename: "indexxxx.html",
// 打包后得html 也压缩
minify: {
removeAttributeQuotes: true, //删除html中得双引号
collapseWhitespace: true, //折成一行
},
hash: true, //哈希值
}),
],
哈希值还有一种也可以[hash：8] 长度
output: {
filename: "bundle[hash].js", //打包后得文件名 加上这个[hash] 产生一个哈希值
path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
},
6.样式处理，解析css less模块
webpack默认只支持加载js模块，现在需要引入样式。需要用到loader加载器
src下创建
index.css
@import "./c.css";
body{
background: red;
}
c.sss
body{
font-size: 30px;
}
le.less
body{
background: yellow !important;
div{
transform: rotate(50deg);
}
}
index.js
require("./index.css");
接下来安装style-loader css-loader
npm i style-loader -D 将css写入到html
npm i css-loader -D 解析@import等语句
npm i less-loader -D 解析less==》css
npm i mini-css-extract-plugin -D css外链
配置文件，loader得顺序是右往左
// 模块加载
module: {
// loader 模块转换器
rules: [
//规则 css-loader 解析@important这种语法
//style-loader 把css插入到head得标签中(也可以是底部)
// less-loader 解析less成css
// loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左,从下往上
// loader还可以写成对象方式
{
test: /\.css$/,
use: [
// {
// loader: "style-loader",
// options: {
// // insertAt: "top", //css打包之后在顶部 默认在底部
// },
// },
MiniCssExtractPlugin.loader,
"css-loader",
],
},
// 处理less sass stylus...
{
test: /\.less$/,
use: [
// {
// loader: "style-loader",
// options: {
// // insertAt: "top", //css打包之后在顶部 默认在底部
// },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
],
},
],
},
效果
自动兼容样式插件autoprefixer和postcss-loader
npm i autoprefixer postcss-loader -D
配置文件
rules: [
//规则 css-loader 解析@important这种语法
//style-loader 把css插入到head得标签中(也可以是底部)
// less-loader 解析less成css
// loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左
// loader还可以写成对象方式
{
test: /\.css$/,
use: [
// {
// loader: "style-loader",
// options: {
// insertAt: "top", //css打包之后在顶部 默认在底部
// },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader", //放在css加载之前
],
},
// 处理less sass stylus...
{
test: /\.less$/,
use: [
// {
// loader: "style-loader",
// options: {
// // insertAt: "top", //css打包之后在顶部 默认在底部
// },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader",
],
},
],
需要外面有个配置文件，根目录下新建postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8", //'last 2 versions', // 所有主流浏览器最近2个版本
],
// grid: true,
},
},
};
压缩CSS，插件optimize-css-assets-webpack-plugin 用了这个插件js也必须用插件压缩
npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
配置文件
// 优化项
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin(), //css压缩 用了这个插件之后js 压缩也必须要插件 uglifyjs-webpack-plugin
new UglifyjsWebpackPlugin({
cache: true, //是否用缓存
parallel: true, //是否并发打包，可以打包多个
sourceMap: false,
}),
],
},
7.js语法转换
装得插件比较多，核心是babel 官网https://www.babeljs.cn/，插件可以在上面找
babel-loader
------------------es6转换----------------------
@babel/core
@babel/preset-env
------------------class转换---------------------
@babel/plugin-proposal-class-properties
--------------------语法 @log 装饰器 转换--------------------------
@babel/plugin-proposal-decorators
-------------------可以转换异步得语法，比如promise,----------------------------
@babel/plugin-transform-runtime
@babel/runtime
-------------------可以转换es7语法，比如includes, 全局引入require("@babel/polyfill");----------------------------
@babel/polyfill
配置 ----------------------------include: path.resolve(__dirname, “src”), //只在src下找
module{
rules:{
// js语法转换
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
// 插件库，预设
presets: [
"@babel/preset-env", //js es6语法转换
],
plugins: [
[
"@babel/plugin-proposal-decorators",
{ legacy: true },
], //语法 @log 装饰器 转换
"@babel/plugin-proposal-class-properties",//转换 class es7语法使用@babel/polyfill,全局require
"@babel/plugin-transform-runtime", //可以转换异步得语法，比如promise, 做了简单得优化，比如抽离公共得部分
],
},
include: path.resolve(__dirname, "src"), //只在src下找
// exclude:/node_modules/, //排除。。。。
},
},
}
}
8.elint配置验证js得语法
配置插件
npm i eslint eslint-loader -D
配置文件
// 模块加载
module: {
// loader 模块加载器
rules: [
{
test: /\.js$/,
use: {
loader: "eslint-loader",
options: {
enforce: "pre", // 强制previous优先执行 post之后执行 保证在js转换之前执行
},
},
},
]
}
创建 .eslintrc.json 内容可以网上有，官网上可以去下载demo，不过下载下来得文件前面少个.，然后放根目录下
https://eslint.bootcss.com/demo/
9，第三方插件得引入
方式三种：
1.import xxxx from ‘’
npm 下载插件， 最后会打包进我们得包里面，js体积会比较大
2.配置文件 使用webpack注入插件,可以使用cdn加速，也可Npm下载包 这里会将插件打包进来
webpack.config.js
顶部 引入webpack插件 用来注入我们得第三方插件
let webpack = require("webpack"); //注入插件
module.exports = {
plugins: [
new webpack.ProvidePlugin({
//每个模块注入 可以使用cdn加速，也可Npm下载包 这里会将插件打包进来
$: "jquery",
}),
]
}
3.推荐：externals 忽略第三方插件，不会打包到我们最后得包中，必须配合cdn使用
module.exports = {
externals: {
jquery: "$",
},
}
这种方式为了防止cdn不稳定，可以做一个兼容，在静态文件夹得index.html中做个判断，下面以vue举例：如果cdn挂了，可以动态得添加一个script标签，地址是自己服务器上得资源（得提前在服务器上备份，或者可以自己公司整一个npm库）
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
//防止cnd不稳定
if(typeof Vue == 'undefined'){
document.write('<script src="http://www.u-breath.com/modules/_vue@2.6.10@vue/dist/vue.min.js"><\/script>')
}
</script>
10.图片得处理
3种图片方式
1.css种背景图片得方式，css-loader会直接帮你转成require()得形式
2.js种 new Image()
import mya from “./my.jpg”;
let img = new Image();
img.src = mya;
document.getElementById(“img”).append(img);需要url-loader拉解析import 引入得图片
npm i url-loader -D
允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理
// 图片解析加载 匹配js中得
rules:
{
test: /\png|jpe?g|gif$/,
use: {
loader: "url-loader",
options: {
limit: 1000 * 1024, //小于xxxk 解析成base64 大于正常产出图片
},
},
},
3.img在html中使用
img src="…/src/my.jpg"
loader:html-withimg-loader
npm i html-withimg-loader -D
rules:
// 图片解析加载 匹配html中得
{
test: /\.html$/,
use: {
loader: "html-withimg-loader",
},
},
11.打包文件分类
css 之前使用插件MiniCssExtractPlugin 外链了css可以改下他得filename
plugins:[
new MiniCssExtractPlugin({
filename: "/css/main.css", //外链得css名
}),
]
img 在url-loader里面可以指定文件夹 ，还能给图片加上绝对路径
{
test: /\png|jpe?g|gif$/,
use: {
loader: "url-loader",
options: {
limit: 10 * 1024, //小于10k 解析成base64 大于正常产出图片
outputPath: "/img/",
// publicPath:"http://xxxxxxxxxxxxxxx" 图片加上绝对路径，比如说图片全部采用得是cdn
},
},
},
效果
12.多入口配置
创建两个js：a.js b.js
配置文件:利用HtmlWebpackPlugin中得chunks属性输出加载对应得js
// 多入口
entry: {
home: "./src/a.js",
other: "./src/b.js",
},
// 多出口
output: {
filename: "[name].js", //打包后得文件名 加上这个bundle[hash].js 产生一个哈希值
path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
},
plugins:[
// html 模板 pub 静态资源文件夹，打包后自动根据pub/index.html，生成indexxxxx.html在dist中
new HtmlWebpackPlugin({
template: "./pub/index.html",
filename: "indexxxx.html",
// 打包后得html 也压缩
// minify: {
// removeAttributeQuotes: true, //删除html中得双引号
// collapseWhitespace: true, //折成一行
// },
chunks: ["home"],
minify: false,
hash: true, //哈希值
}),
// html 模板 pub 静态资源文件夹，打包后自动根据pub/index.html，生成indexxxxx.html在dist中
new HtmlWebpackPlugin({
template: "./pub/index.html",
filename: "indexxxx1.html",
// 打包后得html 也压缩
// minify: {
// removeAttributeQuotes: true, //删除html中得双引号
// collapseWhitespace: true, //折成一行
// },
chunks: ["home", "other"],
minify: false,
hash: true, //哈希值
}),
]
13.devtool 配置报错提示，找到对应的位置
配置文件webpack.config.js
4种值
source-map //增加映射文件，帮助我们调试代码 出错会标出具体位置,包中会多出以.map结尾得文件 显示的是原始源代码
eval-source-map 也能帮助我们调试代码，集成到打包得js中 包裹代码
cheap-module-source-map 不会产生列，但是是一个单独得映射文件 产生后可以保留起来调试 显示的是转换后的代码
cheap-module-eval-source-map不会产生文件，集成在打包后的文件中，不会产生列
devtool: "cheap-module-eval-source-map",
14.继续学习中
标签：插件,js,webpack,html,详细,webpack4.0,loader,css 来源： https://blog.csdn.net/qq_38935512/article/details/112517327