认识webpack
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具中文官方地址
1.可以帮助我们进行模块化，并且处理模块化间的各种复杂依赖关系，所以可以使用任意前端模块规范 AMD CMD CommonJs ,ES6
2.打包过程中可以对资源文件进行撤离，压缩图片，less转换css 等
3.通过各种loade的使用，可以吧css 图片等当做模块来使用
4.webpack为了能正常运行，必须依赖node环境下载node，查看node版本号：node -v
node 环境为了可以正常的执行代码，必须包含各种依赖的包，所以自带npm工具 软件包管理工具（node packages manager）
安装webpack
全局安装webpack
npm install webpack -g
指定版本号全局安装webpack
npm install webpack@版本号 -g
局部安装webpack（开发环境）
1.cd 对应目录
2.npm install webpack --save-dev
区分全局和局部，主要是为了有些时候 版本号不同的情况下打包出来的文件也不同
1.在终端（cmd终端或者vscode的terminal等）直接执行webpack命令，使用的是全局安装的webpack
2.在package.json文件中scripts 脚本中，如果使用了webpack命令，首先会找局部webpack，找不到才会找全局。
配置webpack
1.npm init ，初始化生成 package.json文件
2.创建webpack.config.js文件
3.设置入口文件和出口文件
4.webpack 和package.json 的脚本（scripts）绑定使用-》npm run xx 打包运行
const path = require("path");
module.exports = {
//入口文件
entry: "./src/main.js",
//出口文件
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
};
package.json scripts脚本模块
"scripts": {
"build": "webpack"
},
终端直接运行：npm run build
即可打包以main.js为入口的相互引用的各种js，css等文件,
合并生成dist目录下的bundle.js
目录结构
main.js文件
//使用commonJs的模块化规范
const { add, mul } = require("./js/MathUtil");
console.log("hello");
console.log(add(1, 2));
console.log(mul(1, 2));
//使用es6的模块化规范
import { name, age, address } from "./js/useInfo";
console.log(name);
console.log(age);
console.log(address);
//把css 文件当成 模块导入
require("./style/main.css");
//依赖less文件
require("./style/normal.less");
webpack中loader的使用
loader 官方地址
webpack本身的能力来说，可以处理我们写的js代码，并且会自动处理js之间相关的依赖，但是开发中不仅仅有基本的js代码处理，还需要加载css，图片，包括将less scss等转换为css，.vue文件转成js文件等
对于webpack本身的能力来说，转化这些是不支持的，所以就需要给webpack进行扩展，也就是loader
loader 主要是用于转换某些类型的模块，是一个转换器。
使用过程
1.通过npm安装需要使用的loader
2.在webpack.config.js 中module->rules关键字下进行配置
最常用的loader：
1. 样式loader
less-loader
1.创建.less 文件
@width: 10px;
body {
font-size: @width;
color: yellow;
}
2.安装 sass-loader：
npm install sass-loader sass webpack --save-dev
3.webpack.config.js 配置rulues
const path = require("path");
module.exports = {
//入口文件
entry: "./src/main.js",
//出口文件
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.css$/i,
//css-loader 只负责讲css文件进行加载
//style-loader 负责将样式添加到dom中
//使用多个loader时，依次加载顺序从右边到左边
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
// 将 JS 字符串生成为 style 节点
"style-loader",
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// 将 Sass 编译成 CSS
"sass-loader",
],
},
],
},
};
2.图片处理loader
1.安装url-loader和file-loader
npm install url-loader file-loader --save-dev
2.配置webpack.config.js rules
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
//当加载的图片 小于limit时8k 会将图片编译Base64字符串形式
//当加载的图片 大于limit时8k 需要使用file-loader模块进行加载
limit: 8192, //限制大小可以修改
},
},
],
},
3.在css中设置背景url图片
body {
/* background: green; */
background: url('../img/test.png');
}
webpack自动帮助我们生成一个图片放在dist目录下，这个图片的名字很长，是一个32位的hash值，目的是防止名字重复。
实际项目中，可能对打包的图片名字有一定要求，并且要将所有的图片放在一个文件夹中，所有需要在webpack中rules 添加一定的配置--name
options: {
//当加载的图片 小于limit时8k 会将图片编译Base64字符串形式
//当加载的图片 大于limit时8k 需要使用file-loader模块进行加载
limit: 8192, //限制大小可以修改
name:'img/[name].[hash:8].[ext]'
},
img-->图片要打包的文件夹
[name]-->获取图片原来的名字
[hash:8]-->防止图片命名冲突，依然使用hash，但是只保留8位
ext-->使用图片原来的扩展名
file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。
url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。
Vue Loader
vue-loader是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
如果你不想手动设置 webpack，我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。
1.起步配置，安装loader
npm install -D vue-loader vue-template-compiler
2.配置webpack
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：
3.创建vue文件，通过template 显示view
webpack plugin的使用
plugin官方文档
plugin 插件列表
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，对现有的框架进行扩展。包括：打包优化，资源管理，注入环境变量。
使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。
你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
plugin使用过程
1.通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
2.在webpack.config.js中的plugins中配置插件
常用的几个webpack插件
1.添加版权信息的plugin BannerPlugin 属于webpack自带的插件
1.const webpack = require("webpack");
2. new webpack.BannerPlugin("最终版权归付小影子所有"),
webpack 自带的 版权说明插件，会在dist目录中生成bundle.js.LICENSE.txt 文本文件
2.HtmlWebpackPlugin
HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
1.npm 安装plugin
npm install --save-dev html-webpack-plugin
2.webpack.config.js 配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
其他配置...
plugins: [new HtmlWebpackPlugin()],
};
3. js压缩的插件 uglifyjs-webpack-plugin
1.npm 安装插件
npm install uglifyjs-webpack-plugin --save-dev
2.webpack.config.js 配置插件
webpack 搭建本地服务器 webpack-dev-server
webpack 提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现让浏览器自动刷新修改后的效果，不用每一次都执行打包命令。
1.安装webpack-dev-server
npm install -D webpack-dev-server,
npm install webpack-cli@3 -D
2.配置webpack.config.js 中devserver选项
devServer: {
contentBase: "./dist", // 服务器访问的文件目录
open: true, //是否是立即打开
port: 8080, //端口号
host: "localhost", //链接地址
},
3.在package.json 的scripts脚本配置中添加 webpack-dev-server的配置
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
4.终端执行命令 npm run dev ，打开项目，修改项目内容的时候，也不需要重新打包编译
ctrl+c退出本地服务器
webpack中配置vue
1.npm 安装 vue
npm install vue --save
2.入口js文件中，创建vue对象，绑定到index.html 中
index.html
Document
main.js
import Vue from "vue";
import App from "./APP";
//使用commonJs的模块化规范
const { add, mul } = require("./js/MathUtil");
console.log("hello");
console.log(add(1, 2));
console.log(mul(1, 2));
//使用es6的模块化规范
import { name, age, address } from "./js/useInfo";
console.log(name);
console.log(age);
console.log(address);
//把css 文件当成 模块导入
require("./style/main.css");
//依赖less文件
require("./style/normal.less");
//方式1
new Vue({
el: "#app", //在index.html，创建div 设置id为app
components: { App },
template: "webpack 配置文件拆分 开发环境配置和生产环境配置
1.安装webpack-merge
npm install webpack-merge --save-dev
2.拆分config ->baseCongig devConfig,proConfig,通过webpackMerge合并，动态配置
base-webpack-config.js
const path = require("path");
//vue加载插件
const { VueLoaderPlugin } = require("vue-loader");
//生成HTML文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
//入口文件
entry: "./src/main.js",
//出口文件
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js",
// publicPath: "dist/",
},
module: {
rules: [
{
test: /\.css$/i,
//css-loader 只负责讲css文件进行加载
//style-loader 负责将样式添加到dom中
//使用多个loader时，依次加载顺序从右边到左边
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
// 将 JS 字符串生成为 style 节点
"style-loader",
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// 将 Sass 编译成 CSS
"less-loader",
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
//当加载的图片 小于limit时8k 会将图片编译Base64字符串形式
//当加载的图片 大于limit时8k 需要使用file-loader模块进行加载
limit: 8192, //限制大小可以修改
name: "img/[name].[hash:8].[ext]",
},
},
],
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
resolve: {
//导入文件 省略扩展后缀名
extensions: [".js", ".css", ".vue"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@pages": path.resolve(__dirname, "../src/pages"),
"@style": path.resolve(__dirname, "../src/style"),
"@img": path.resolve(__dirname, "../src/img"),
"@component": path.resolve(__dirname, "../src/component"),
},
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html", // 打包后的文件名，默认是index.html
template: path.resolve(__dirname, "../src/index.html"), // 导入被打包的文件模板
}),
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
],
};
pro-webpack-config.js
const webpack = require("webpack");
//js文件压缩插件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.webpack.config");
module.exports = WebpackMerge.merge(baseConfig, {
plugins: [
//webpack 自带的 版权说明插件，会在dist目录中生成bundle.js.LICENSE.txt 文本文件
new webpack.BannerPlugin("最终版权归付小影子所有"),
new UglifyJsPlugin(),
],
});
dev-webpack-config.js
const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.webpack.config");
module.exports = WebpackMerge.merge(baseConfig, {
devServer: {
contentBase: "./dist", // 服务器访问的文件目录
open: true, //是否是立即打开
port: 8080, //端口号
host: "localhost", //链接地址
},
});
package.json --config 指定配置文件
"scripts": {
"build": "webpack --config ./build/pro.webpack.js",
"dev": "webpack-dev-server --config ./build/dev.webpack.config.js"
},