Webpack
定义：前端静态模块打包工具
一、前端模块化
1.1前端模块化方案：AMD、CMD、CommonJS、ES6
1.2在ES6之前，如果想要进行模块化开发，就必须借助其他工具，并且在模块化开发完成项目后需要处理每个模块之间的依赖关系，并将其整合打包
1.3webpack核心就是让我们进行模块化开发，并且会帮助处理模块之间的依赖关系
1.4不仅仅时JS文件，CSS、img、json文件等都会被当作模块化使用
二、安装
2.1webpack为了可以正常运行，依赖node环境
2.2node环境为了可以正常执行很多代码，必须其中包含各种依赖的包
2.3node内部有npm工具，负责安装各种各样的包
// 1.检测node版本
node -v
// 2.全局安装webpack
npm install webpack@3.6.0 -g
三、基本使用
3.1文件夹src和打包文件夹dist
3.2src文件夹中需要一个main.js作为入口
3.3dist文件夹中有一个bundle.js的打包文件
3.4终端写法：webpack ./src/main.js ./dist/bundle.js--从main.js打包到bundle.js
3.5index.html只需要引入打包好的bundle.js即可
// CommonJS结合webpack
// math.js导出
function add(a, b) {
return a + b;
};
function mul(a, b) {
return a * b;
};
// 导出
module.exports = {
add,
mul
};
// main.js导入
const { add, mul } = require("./math.js");
// ES6结合webpack
// info.js导出
const name = "yg";
const age = 25;
const height = 1.93;
// 导出
export {name, age, height};
// main.js导入
import {name, age, height} from "./info.js";
四、配置
智能配置入口和出口文件
4.1新建文件名称：webpack.config.js
4.2通过CommonJS导出指定入口和出口
module.exports = {
entry: "入口文件",
output: "出口文件"
}
// 1.导入path
const path = require("path");
// 2.执行npm init初始化，会自动安装配置好package.json
// 3.通过npm install可以安装依赖文件，会多一个package-lock.json
// 4.在package.json脚本文件里写入"build": "webpack"，可以执行npm run build进行打包，这里默认是全局的webpack
// 5.安装本地webpack：npm install webpack@3.6.0 --save-dev(表示开发时依赖，打包前需要，之后不需要)，在package.json中会多一个devDependencies，多一个node_modules文件夹
// 6.只要在终端写的webpack都是运行的全局的，在package.json中的webpack是本地的
// 通过CommonJS导出
module.exports = {
// 入口
entry: "./src/main.js",
// 出口
output: {
// 路径拼接调用path的resolve方法：第一个参数是__dirname，第二个参数是出口文件夹名
path: path.resolve(__dirname, "dist"),
// 出口文件名
filename: "bundle.js",
// 涉及任何url都会在前面拼接dist
publicPath: "dist/"
}
}
五、loader
webpack的核心概念loader
5.1通过npm安装需要使用的loader
5.2在webpack.config.js中的module关键字进行配置
5.3--save-dev表示只有开发时依赖；--save表示运行时依赖
css-loader/style-loader
// main.js引入依赖其他css文件
require("./css/base.css"); // CommonJS
import "./css/base.css"; // ES6
// 安装css-loader
npm install --save-dev css-loader@2.0.2
//安装style-loader
npm install --save-dev style-loader@0.23.1
// 配置
{
// css-loader只负责文件加载
// style-loader负责将样式添加到dom
// 使用多个loader从右向左读取
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
less-loader：针对less样式
// 安装
npm install less less-loader@4.1.0 --save-dev
// 配置
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
url-loader/file-loader：针对图片问题
// 安装
npm install --save-dev url-loader@1.1.2
npm install --save-dev file-loader@3.0.1
// 配置
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片小于limit时，会将图片编译成base64形式
// 当加载图片大于limit时，需要安装file-loader@3.0.1
limit: 8192,
// 对打包好的图片进行规范化命名
// img文件夹下的[动态初始名][动态哈希值8位][动态后缀名]，用点连接
name: "img/[name].[hash:8].[ext]"
},
},
],
},
// 图片未显示是因为路径报错，需要在outoput位置配置公共路由
publicPath: "dist/"
babel-loader:：针对ES6语法转换为ES5
// 安装
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
// 配置
{
test: /\.m?js$/,
// 排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
六、引用VUE
// 安装
npm install --save vue@2.5.12
npm install --save-dev vue-loader@14.2.2 vue-template-compiler@2.5.12
七、插件plugins[数组类型]
7.1版权声明插件
// 自带插件，不需要安装
// 导入webpack
const webpack = require("webpack");
// 使用
new webpack.BannerPlugin("最终版权归coderyg所有"),
7.2打包html的插件
作用：
7.2.1.1自动生成一个index.html文件；
7.2.1.2将打包的js文件，自动通过script标签插入到body中
注意：
7.2.2.1template表示根据什么模板来生成html；
7.2.2.2需要删除publicPath属性，否则插入的script标签中的src可能会有问题
// 安装
npm install --save-dev html-webpack-plugin@3.2.0
// 导入
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 使用
new HtmlWebpackPlugin({
// 根据index.html为模板生成
template: "index.html"
}),
7.3压缩丑化插件
// 安装
npm install --save-dev uglifyjs-webpack-plugin@1.1.1
// 导入
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");
// 使用
new uglifyJsPlugin()
八、搭建本地服务器
// 安装
npm install --save-dev webpack-dev-server@2.9.1
// 设置
// webpack.config.js配置
devServer: {
// 为哪个文件夹提供服务，默认是根文件夹
contentBase: "./dist"
// 端口号
prot: ""
// 页面实时刷新
inline: true
// 在SPA页面中，依赖HTML5的history模式
historyApiFallback: ""
}
// package.json配置
"dev": "webpack-dev-server --open"
// 使用
npm run dev
