webpack
webpack官网
在这里插入图片描述
什么是webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是一个前端项目构建工具，是基于Nood.js开发出来的。
webpack安装
全局安装：npm i webpack -g
项目依赖：npm i webpack --save-dev
webpack基本使用
创建一个文件夹：webpack\test
通过 npm init -y 初始化一个package.json文件
F:\webpack\test>npm init -y
Wrote to F:\webpack\test\package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack": "^4.42.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
打包: webpack 要打包的文件路径 打包好的输出文件的路径
新建一个 webpack.config.js 配置文件
const path = require('path');
module.exports = {
entry: './src/main.js',//入口
output: {//出口
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode:'development'//设置mode
};
- 自动打包：cnpm i webpack-dev-server -D
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.dev.config.js ",
"prod": "webpack-dev-server --config ./webpack.prod.config.js"
},
- 插件：cnpm i html-webpack-plugin -D（HTML文件的创建）
//webpack.config.js
const path=require('path')
//启用热更新 第2步
const webpack=require('webpack')
//导入在内存中 生成HTML 页面中的插件
const htmlWebpackPlugin=require('html-webpack-plugin')
//这个插件的作用：1 自动在内存中根据指定页面生成一个内存的页面; 2 自动把打包好的bundle.js 追加到页面中去
module.exports = {
entry: './src/main.js',//入口
output: {//出口
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode:'development',//设置mode
devServer:{//这是配置dev-server命令参数的第二种形式相对来说麻烦一些
//--open --port 3000 --contentBase src --hot
//打开浏览器 打开的端口号 默认打开的目录 热更新
open:true,//自动打开浏览器
port:3000,//设置启动时候的运行端口
contentBase:'src',//指定托管的根目录
hot:true//启动热更新 第1步
},
plugins:[//配置插件的节点
new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象，启用热更新的第3部
new htmlWebpackPlugin({//创建一个在内存中生成的HTML页面插件
template:path.join(__dirname,'./src/index.html'),//指定模板页面将来会根据指定的页面路径去生成内存中的页面
filename:'index.html'//指定生成的页面的名称
})
],
};
webpack中的两个环境
- 开发环境 :开发期间的环境，在项目没有上线之前使用，代码不会压缩
"dev"："webpack ./src/js/main.js --output ./dist/bundle.js --mode development"
- 生产环境 :项目上线的时候使用，将代码打包压缩
"pro"："webpack ./src/js/main.js --output ./dist/bundle.js --mode production"
常用loader
安装
.css :
cnpm i style-loader css-loader -D
.less :
cnpm i less-loader less -D
.scss :
cnpm i scss-loader node-sass -D
图片格式 :
cnpm i url-loader file-loader -D
.js :
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
.vue :
cnpm i vue-loader vue-template-compiler -D
模块配置
module:{//这个节点用于配置所有的第三方 loader模块 加载器
rules:[//所有第三方模块的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']},//配置处理css文件的第三方loader规则
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理less文件的第三方loader规则
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理scss文件的第三方loader规则
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7634&name=[hash:8]-[name].[ext]'},//配置处理图片路径文件的第三方loader规则
//limit给定的值，是图片大小单位是byte，
// 如果我们引用的图片大于或等于给定的limit值，则不会转为base64格式的字符串
// 如果图片小于给定的limit值则会被转为base64的字符串
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置Babel来转换高级es语法
{test:/\.vue$/,use:'vue-loader'},//配置vue文件的loader
]
},
.新建babelrc 配置文件
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}