webpack 4.X
"webpack": "^4.43.0", / '4.26.0' "webpack-cli": "^3.3.11" / '3.1.2'webpack 模块打包工具 (js翻译器 可以识别import和require引入)
注意：引入的js文件和css文件打包的方式是不同的wepack 安装 与 初始化
webpack 不建议安装全局 查看webpack的版本 在工程目录下 npx webpack -v (npx在当前项目目录的node_modules目录下找webpack包，找不到之后再去全局中找) 安装确定的版本号 npm info webpack 查看webpack的版本信息 npm install webpack@版本号 webpack-cli -D (webpack-cli作用:可以在命令行中使用webpack的命令) 初始化 1 npm init -y 2 npm install webpack webpack-cli --save-dev 3 npx webpack index.js // 用webpack翻译xx 文件webpack 中的package.json
"private":true , // 私有 "main":"index.js", // 向外暴露js文件 "license":'', //是否开源设置 "script":{ "built":"webpack" // npm run webpack 可以直接打包 }webpack的配置
默认配置 webpack.config.js const path = require('path); module.exports = { mode:'production', // 默认模式 or值为development打包代码不会被压缩 entry:'相对路径', // 打包入口文件 入口文件不简写情况下{main:'路径'} output:{ filename:'main.js', // 打包的文件名称 filename:{main:'main.js'} path:path.resolve(__dirname,'dist') //打包的文件夹 绝对路径 } } 运行 npx webpack 即可打包 打包输出的信息 Hash:本次打包唯一的hash值 version:本次使用的webpack的版本 time:整体打包耗时 asset：打包出来的文件名 size:打包出来文件的大小 chunks: 文件对应的id值，和与打包文件有关的id值 chunk name:对应文件的名字 entrypoint: 入口文件 本次文件打包文件 不是默认文件名的情况下： 不是默认文件 运行 npx webpack --config + 配置文件的名称package.json
script:{ "bundle":"webpack" // 会先在本地node_modules中找包，没有再去全局找 }webpack默认只能打包处理js文件，打包其他文件需要借助loader
loader的使用 执行顺序 从下到上 从右到左 (作用：完成不同文件的打包)
在配置文件中设置 module:{ rules:[ { test:/\.jpg$/, // 打包jpg结尾的文件 use:{ loader:'url-loader|file-loader', // 需要先安装 npm i file-loader -D options:{ name:'[name].[ext]'， // 保证打包的名字不变 placeholder占位符 outputPath:'images/', // 打包到 dist/images 文件夹中 limit:2048, // 只有url-loader才有此设置 } } }， { test:/\.vue$/, //打包vue的文件 use:{loader:'vue-loader', // 需要先安装 npm i vue-loader -D} },{ test:/\.css$/, use:['style-loader','css-loader'] } ] } 问题一：file-loader底层执行原理： 1 先把文件拷贝到打包文件dist目录下，但是名字变化了 2 给原文件中返回文件路径 问题二： file-loader 和url-loader的区别 url-loader:图片在打包文件中生成一个base64的文件，不会额外生成文件，设置limit的作用是，在大于limit值的时候，会和file-loader一样，小于limit值的话，图片打包在输出文件中 问题三：打包css style-loader: 把打包文件挂载到head中 css-loader: 分析多个css之间的关系，从而合并成一段css 引入scss文件 需要的loader: ['style-loader','css-loader','scss-loader','postcss-loader'] postcss-loader: 添加厂商前缀 配置： 文件中 postcss.config.js module.export = { plugins:[ require('autoprefixer') ; // 需要安装autoprefixer的插件 npm i autoprefixer -D ] } css-loader中添加 option:{ importLoader:2, // scss样式中引入的scss，如果不写会直接走css-loader,有的话，则先执行下面的2个loader modules:true, //css模块化，只在引入的文件中起作用 引入方式 @import style from './index.css' } 打包字体图标的loader { test:/\.(eot|ttf|svg)$/, use:{ loader:'file-loader } }plugins 插件
作用：可以在webpack运行到某个时刻的时候，帮你做一些事情 插件一： 1>安装插件 npm install -D html-webpack-plugin // 会在打包结束后，自动生成一个HTML文件，并把打包生成的js自动引入到html中 2>引入插件 let HtmlWebpackPlugin = require('html-webpack-plugin) 3>使用插件 plugins:[new HtmlWebpackPlugin( { template:'src/index.html' , //创建一个打包模板 } )] 插件二： clean-webpack-plugin plugins:[new CleanWebpackPulgin(['dist])] // 打包前会删除dist下的文件entry和output的基本配置
entry:'./index.js' ==>entry:{main:'./index.js'} 多入口打包 entry:{ main:'./index.js', sub:'./index.js', } output:{ publicPath:'http://cdn.com.cn', //引入的文件中加上前缀 filename:'[name].js', //用占位符打包出mian.js和sub.js文件 path:path.resolve(__dirname,'dist') }sourceMap配置
