webpack
- 项目中
npm i webpack --save
npm i webpack-cli --save
yarn add html-webpack-plugin
yarn add clean-webpack-plugin
yarn add style-loader css-loader
yarn add file-loader url-loader
- webpack-.config.js
多入口单出口
const path = require('path');
module.exports = {
mode: 'development', // 打包模式
//entry:"./scr/main.js", // 指定入口
entry: ['./src/one.js', './src/two.js'], // 数组模式可以将多个文件都打包成为一个。多入口单出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js', // 指定文件的出口模式
},
};
多入口多出口
const path = require("path")
module.exports = {
mode:"development", // 打包模式
// 使用对象模式
entry:{
one:'./src/one.js',
two:'./src/two.js'
},
output:{
path:path.resolve(__dirname,"dist"),
filename:"[name].bundle.js" // 将入口entry对象的属性名,替换[name]
}
// plugins 类型是一个数组,该数组的每一个元素是你要使用的plugin(插件)
plugins:[
]
}
clean-webpack-plugin
- 清除多余文件
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// plugins 类型是一个数组,该数组的每一个元素是你要使用的plugin(插件)
plugins: [
new CleanWebpackPlugin(), // 清除多余文件
],
};
html-webpack-plugin
- 插件需要依赖 webpack webpack-cli
- 可以把生成的 js 文件引入到 Html 页面中,如果不指定模板地址,默认生成一个页面默认名字 index.html
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// plugins 类型是一个数组,该数组的每一个元素是你要使用的plugin(插件)
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // 指定模板地址
filename: 'home.html', // 指定打包后的HTML名字
hash: true, //为引入的JS的地址增加后缀,用于清除缓存
inject: true, // 是否嵌入到HTML文件当中,默认是true
inject: 'head', // 嵌入到head中
chunks: ['my'], // 入口的属性名,不是文件名入口是对象才可以,指定打包html引入文件
excludeChunks: ['my'], // 出了入口的my文件,其他都打包
title: '大家好,你现在学的是webpack', // 在指定模板地址上使用<%= htmlWebpackPlugin.options.title%>来使用
minify: {
removeComments: true, // 清除注释
removeAttributeQuotes: true, // 清除双引号
collapseWhitespace: true, // 进行折叠,去除空格
},
}),
],
};
file-loader url-loader style-loader css-loader
- 解决图片打包和 sass&less 打包
module.exports = {
module: {
// 加载转换, css less sass 图片 jsx
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'],
},
{
// less-loader 将less-->css
// yarn add less-loader less
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader'],
},
{
// yarn add sass-loader node-sass
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
},
{
// yarn add url-loader file-loader
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
query: {
limit: 7869, // limit 指定转换的图片大小,当图片小于该怎样,大于改怎样
outputPath: 'img', // 指定图片防止的文件夹
},
},
],
},
],
},
};
webpack-dev-server
- 热更新
- 不会帮你打包
"scripts": {
"dev":"webpack-dev-server"
},
module.exports = {
module: {
devServer:{
open:true, // 是否在浏览器当中自动打开
port:8081,// 设置端口号
host:"127.0.0.1" // 设置端口号
historyApiFallback:true, // 地址重定向,在 / 后面随便输入都是 / 目录
proxy:{ // 代理服务
// https://m.lagou.com/m/listmore.json?pageNo=2&pageSize=15 相当于请求这个地址
// pathRewrite 把/m 替换为空
"/m":{ // 代理的前缀标识
target:"https://m.lagou.com",// 请求的服务
changeOrigin:true,
pathRewrite:{
"^/m":""
}
}
}
}
},
}
7 版本 babel-loader
- 解析高级语法
yarn add babel-core babel-loader@7 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0
module.exports = {
module: {
rules: [
{ test: /\.css$/, loader: ['style-loader', 'css-loader'] },
{
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
},
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=5000' },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //解析高级语法
],
},
};
- 根目录下创建–> .babelrc
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
** 8 版本 babel-loader**
- 解析高级语法
-
yarn add babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties
- babel-loader:加载器
- @babel/core:babel 核心包,babel-loader 的核心依赖
- @babel/preset-env:ES 语法分析包
- @babel/runtime 和 @babel/plugin-transform-runtime:babel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化 BOM(浏览器)里面不兼容的 API。比如 Promise,Set,Symbol,Array.from,async 等等的一些 API。这 2 个包就是来搞定这些 api 的。
- @babel/plugin-proposal-class-properties:用来解析类的属性的。
module.exports = {
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //解析高级语法和7版本不变
],
},
};
- 根目录下创建–> .babelrc
{
"presets":["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}