一、Webpack基本使用--安装和配置
① 新建一个空目录并进入该目录，执行命令 npm init -y 来初始化 package.json 包管理配置文件.
② 执行命令 npm install webpack webpack-cli -D 来安装相关包
③ 在项目根目录中创建名为 webpack.config.js 的配置文件， 该配置文件初始化内容如下：
// webpack.config.js module.exports={ mode: 'development' //开发模式 development, 生产模式 production }
④在 package.json 配置文件中的 scripts 节点中，增加dev脚本 如下:
"scripts": { "dev" : "webpack" },
⑤ 在根目录下新建一个src的目录，同时在该目录下创建一个 index.js 的文件，文件内容可以为空
⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.
二、Webpack基本使用--配置打包的入口与出口
// webpack.config.js const path = require('path') //导入node.js中操作路径的模块 module.exports={ mode: 'development', //开发模式 development, 生产模式 production entry: path.join(__dirname,'src/index.js'), //打包入口文件路径 output:{ path: path.join(__dirname,'dist'), //输出文件的路径 filename: 'bundle.js' //输出文件的名称 } }
三、Webpack基本使用--配置自动打包
① 执行命令 npm install webpack-dev-server -D
② 在 package.json 配置文件中的 scripts 节点中，修改dev脚本 如下:
"scripts": {
"dev" : "webpack-dev-server"
},
③ 在src目录下新建一个index.html文件，index.html文件中引入 <script src="/bundle.js"></script>
该bundle.js文件是看不见的，它是在内存中的文件.
④ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包.
⑤若访问链接 http://localhost:8080/ 报错 Cannot GET / ，则需要在 webpack.config.js中增加devServer的如下配置内容：
// webpack.config.js const path = require('path') //导入node.js中操作路径的模块 module.exports={ mode: 'development', //开发模式 development, 生产模式 production entry: path.join(__dirname,'src/index.js'), //打包入口文件路径 output:{ path: path.join(__dirname,'dist'), //输出文件的路径 filename: 'bundle.js' //输出文件的名称 }, // webpack4.0版本不需要加，webpack5.0版本必须加才行 devServer: { static: { directory: path.join(__dirname, "/"), }, } }
四、Webpack基本使用--配置html-webpack-plugin生成预览页面
① 执行命令 npm install html-webpack-plugin -D 安装生成预览页面的插件
② 修改 webpack.config.js 的配置文件，在该文件的头部区域添加如下内容：
③ 修改 webpack.config.js 的配置文件, 在module.exports里面增加 plugins的配置
// webpack.config.js const path = require('path') //导入node.js中操作路径的模块 const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象 template: 'src/index.html', //指定要用到的模板文件，即要复制的首页文件 filename: 'index.html' //指定生成的文件名称，该文件存在于内存中 }) module.exports={ ...忽略其它内容...
}
④ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包
五、Webpack基本使用--配置自动打包相关参数
① 在package.json文件的 script 中
② --open 表示自动打开浏览器 --host 配置IP --port 配置端口
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 " },
③ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包
六、Webpack基本使用--通过loader打包非js模块
在实际开发中，webpack默认只能打包以.js结尾的模块，其它非.js的模块无能为力，此时需要调用loader加载器才能正常打包
loader加载器可以协助webpack打包处理特定的文件模块。
处理css结尾的文件
① 执行命令 npm install style-loader css-loader -D 安装加载器
② 修改 webpack.config.js 的配置文件，在module.exports里面增加 module 的配置
// webpack.config.js ...忽略其它内容 module.exports={ ...忽略其它内容 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader']} //它会处理以css结尾的文件，同时从该数组配置的两个loader的右边loader往左边执行 ] } }
③ 在src目录下新建测试文件 123.css ，写一个简单的样式如
⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.
处理less结尾的文件
① 执行命令 npm install less-loader less -D 安装加载器
② 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中增加配置项
// webpack.config.js ...忽略其它内容 module.exports={ ... 忽略其它内容 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader']}, {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, ] } }
③ 在src目录下新建测试文件 123.less ，写一个简单的样式如
⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.
处理scss结尾的文件
① 执行命令 npm install sass-loader node-sass -D 安装加载器
② 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中增加配置项
// webpack.config.js ...忽略其它配置 module.exports={ ...忽略其它配置 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader']}, {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}, ] } }
③ 在src目录下新建测试文件 123.scss ，写一个简单的样式如
⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.
配置postCSS自动添加css的兼容前缀
① 执行命令 npm install postcss-loader autoprefixer -D 安装加载器
② 在项目根目录新建 postcss.config.js 的配置文件，内容：
// postcss.config.js const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件 module.exports={ plugins: [autoprefixer] //挂载插件 }
③ 在src目录下修改测试文件 123.css ，写如下样式
// webpack.config.js ...忽略其它配置 module.exports={ ...忽略其它配置 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']}, {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}, ] } }
⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包
⑥ 在不同的浏览器中观察效果是否一致
打包样式表中的图片或字体文件
① 执行命令 npm install url-loader file-loader -D 安装加载器
② 在src目录下修改测试文件 123.css ，写如下样式
// webpack.config.js ...忽略其它配置项 module.exports={ ...忽略其它配置项 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']}, {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}, //当图片大小小于limit指定值(byte)则会被转成base64图片 {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} ] } }
⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包
打包JS文件中的高级语法
① 执行命令 npm install babel-loader @babel/core @babel/runtime -D 安装babel转换器相关包
② 执行命令 npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D 安装babel语法插件相关包
// babel.config.js module.exports={ presets: ['@babel/preset-env'], //语法包 plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties'] //挂载插件 }
// webpack.config.js ...忽略其它配置 module.exports={ ...忽略其它配置 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']}, {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}, //当图片大小小于limit指定值(byte)则会被转成base64图片 {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} , ///node_modules目录下的是第三方包的不是我们写的代码必须排除掉 {test: /\.js$/, use: 'babel-loader', exclude:/node_modules/} , ] } }
⑤ 在src/index.js中写一个测试代码
⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.
配置vue组件的加载器
① 执行命令 npm install vue-loader vue-template-compiler -D 安装相关包
② 在webpack.config.js中添加如下配置
// webpack.config.js ...忽略其它配置 const VueLoaderPlugin = require('vue-loader/lib/plugin') //vue插件 module.exports={ ...忽略其它配置 plugins: [htmlPlugin,new VueLoaderPlugin()], //plugins数组是webpack打包用到的一些插件列表 module:{ rules:[ {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']}, {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}, //当图片大小小于limit指定值(byte)则会被转成base64图片 {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} , ///node_modules目录下的是第三方包的不是我们写的代码必须排除掉 {test: /\.js$/, use: 'babel-loader', exclude:/node_modules/} , {test: /\.vue$/, use: 'vue-loader'} ] } }
六、Webpack基本使用--VUE文件
① vue 单文件由3部分组成 template组件的模板区域 script业务逻辑区域 style样式区域
② 编写一个.vue文件示例 注意在VSCode中安装插件 Vetur 这样编辑器才能识别和提示vue文件
<template> <div> <h3>这是App.vue的组件</h3> </div> </template> <script> export default{ data(){ return { } }, methods:{ } } </script> <style scoped> h3{ color:red; } </style>
③ 注意在当前项目根目录下的终端运行 npm install vue -S 来安装vue
七、Webpack项目中使用 vue
① npm install vue -S 安装vue
② 在src/index.js 入口文件中，通过 import Vue from 'vue' 来导入vue构造函数
③ 创建vue实例对象，并指定要控制的 el 区域
④ 通过 render函数 渲染 App 根组件
// src/index.js //忽略之前其它测试代码 //------------------华丽的分割线------------------------------ import Vue from 'vue' //导入vue单文件组件 import App from './components/App.vue' const vm = new Vue({ el: '#app', render: c => c(App) });
⑤ 在src/index.html 中加上 id为app 的 div
⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.
八、Webpack打包发布
① 修改项目根目录下的 package.json文件
② 在script中增加 build脚本
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 ", "build": "webpack " },
③ 在终端运行 npm run build 命令，webpack进行项目打包.，生成的文件在dist目录下.
注意: 这个是最简单的打包发布
附 package.json
{ "name": "02_webpack_gehangbianse_New", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 ", "help": "webpack --help", "build": "webpack " }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.16.7", "@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/plugin-transform-runtime": "^7.16.8", "@babel/preset-env": "^7.16.8", "@babel/runtime": "^7.16.7", "autoprefixer": "^10.4.2", "babel-loader": "^8.2.3", "css-loader": "^6.5.1", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "less": "^4.1.2", "less-loader": "^10.2.0", "node-sass": "^7.0.1", "postcss-loader": "^6.2.1", "sass-loader": "^12.4.0", "style-loader": "^3.3.1", "url-loader": "^4.1.1", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", "webpack": "^5.66.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.7.3" }, "dependencies": { "vue": "^2.6.14" } }
