目录
image: 如何将打包的时候 将图片一并打包 我们需要使用到这个 file-loader url-loader
Vconsole免安装的cdn版本，进去复制一下你需要的版本
Tree-shaking&scopeHosting(生成环境下)
日常组件使用
对ES6的解析 插件
npm install babel-loader @babel/core @babel/preset-env
//@babel/core babel的核心模块
//babel-loader 解析js代码，wepback和babel的桥梁
//@babel/preset-env es6转化成es5插件的集合
//@babel/plugin-transform-runtime @babel/runtime 去出重复的代码对了babel的支持我们还需要在根目录下建立一个 .babelrc 的文件写上写上下面的内容 这个地对es6的一系集合
//最简洁的方式
{
"presets":[
"@bable/preset-env"
]
}
//或者是下面这个是优化webpack
//但是需要安装 @babel/plugin-transform-runtime
//@babel/plugin-proposal-decorators
//@babel/plugin-proposal-class-properties
{
"presets": [
["@babel/preset-env",{
"useBuiltIns":"usage", //只转化使用的api
"corejs":3 //@babel/pollyfill 转化es6中高版本的api
}]
], //预设（插件的集合）从下往上
"plugins":[
"@babel/plugin-transform-runtime",//将重复的方法与类 提取出来。调取这个提取出来方法。从而达到webpac包裹的减少
["@babel/plugin-proposal-decorators", { "legacy": true }],//类装饰器
["@babel/plugin-proposal-class-properties", { "loose" : true }]//赋值结构的转换
] //一个个插件 2
}下面是webpack.config.js的内容 添加上 mode与loader的内容
const path = require('path')
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
module:{
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /\.js$/i,
exclude: '/(node_modules)/', // 排除文件
loader: 'babel-loader'
}
]
}
}可能遇见的问题：你按照上述的方式安装之后可能会出现，报错的问题，然后npm会给你两个提示分别是两个指令，你输入其中一个就好，如果还是报错，就将node_modules模块删掉掉就好。然后npm inistall 一下。
这个loader 配置直起来有些难 看下这个博主的
Couldn't find preset "@babel/preset-env" relative to directory_云海梦尘的博客-CSDN博客
image: 如何将打包的时候 将图片一并打包 我们需要使用到这个 file-loader url-loader
如果你对于路径打包中图片资源的引用 很苦恼 与css中的引用出现找不到相应的图片，请看这一个博客：关于webpack的file-loader与url-loader打包出现路径不对的问题_huhudeni的博客-CSDN博客
npm i file-loader --D{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
// loader: 'file-loader',
loader: 'url-loader?limit=1024&name=./images/[name].[ext]'
},
],
},
//---------或者是---------
{
test:/\.(png|gif|jpg)$/,
use:{
loader:'file-loader',
options:{
name:'img/[name].[ext]'
}
}
},关于url-loader的使用
npm install url-loader -D在webpack中的配置
{
test:/\.(png|gif|jpg)$/,//定制规则
use: {
loader:'url-loader',
options:{
limit:10*1024, //设置小于10Kb的图片转化为base64输出 不在使用image
outputPath:'image',//打包后存放的文件夹的位置
name:'[name].[ext]'//[name]=名字 [ext]=后缀
}
}
}更准确的说是资源的复制，不仅仅是image
const CopyWebpackPlugin = require('copy-webpack-plugin')在webpack下面写入
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
plugins:[
new CopyWebpackPlugin([
{
from: './src/assets/images',//当前的目录中image的资源位置
to: './assets/images',//打包后的资源的位置 但是我建议你写的一样 这样就避免了打包中可能会出现图片找不到的问题
ignore: ['.*']
}
]),
],
}
css预处理器
//我使用的sass
//所以是
npm i sass sass-loader -D
//下面是我使用的对用的版本
"sass": "^1.43.2",
"sass-loader": "^9.0.2",
//下面是的预处理器。大家需要哪个就需要安装哪个
//style-loader css-loader
//less less-loader
//sass(node-sass 不推荐这个 应为下载有时候下载不成) sass-loader
//stylus stylus-loader关于sass的问题需要特别指出，我之前安装出现了版本的问题 与改为下面的
yarn add sass sass-loader -D
或者
npm i sass sass-loader -D
下面是配置单纯的配置css
module:{
rules:[{
test:/\.css$/,
exclude: /node_modules/,//不需要打包成为的
use:['style-loader','css-loader']//从右往左 或者从下往上
}]
}我们需要使用到相关的预处理器 比如使用的是 要使用的是scss
module:{
rules:[{
test:/\.scss$/,
exclude: /node_modules/,
use中的可以以三种方式配置 1-单纯的字符串（仅仅配置一个loader）2-配置多个loader就是数组形式 3-数组中写入{}从而单独的进行配置具体的loader参数
use:[{
loader: 'style-loader',
},{
loader:'css-loader',
},{
loader: 'sass-loader'
}],//从右往左 或者从下往上
}]
}分离css与js
npm i -D mini-css-extract-plugin首先我需要在webpack.config.js中添加
const MiniCssExtractPlugin = require('mini-css-extract-plugin') const path = require('path') module.exports={ entry:'./src/index.js', output:{ filename:'index.js', path:path.resolve(__dirname,'dist') }, plugins:[ //分离第一步 要在plugons中使用这个插件 new MiniCssExtractPlugin(), ], rules: [ { test: /\.css/, include: [ path.resolve(__dirname, 'src'), ], use: [ MiniCssExtractPlugin.loader,//使用插件开始进行设置分离 // 'style-loader',将style-loader使用MiniCssExtractPlugin.loader替换 他 们不能同时存在 'css-loader', ], }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader,//使用插件开始进行设置分离 // 'style-loader',将style-loader使用MiniCssExtractPlugin.loader替换 他们不能同时存在 'css-loader', "sass-loader" ] } ] }, plugins:[ //我们需要先把插件引入 new MiniCssExtractPlugin({ filename: 'index.[hash:8].css', //这个里面是可以写可以不写的 }), ] }
注意！！即使使用了 ‘style-loader’ ，在index.html上也不会自动的链接<link href="main.css" rel="stylesheet">
这个是因为 在 package.json的文件中 模式使用sideEffects：true。这样会把css的文件摇晃下去。所以我们可以将他改为sideEffects：false，就可使自动引用css了，但是这样肯定不行的。因为sideEffects是一个优化项，帮助我们吧多余的文件给剔除掉。所以肯定不能这样处理 跳过去 看这个 Tree-shaking&scopeHosting(生成环境下)
css自动添加后缀
配置方法一
npm i autoprefixer postcss-loader -D在webpack.config.js中做如下的修改
const path = require('path')
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
module:{
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
plugins: () => [
require('autoprefixer')({
overrideBrowserslist:['last 2 version', '>1%' ]
})
]
}
},
"sass-loader",
//postcss-loader 执行顺序必须保证在 css-loader 之前，建议还是放在 less或者 sass 等预处//理器之后更好。即 loader 顺序：
//less-loader -> postcss-loader -> css-loader -> style-loader 或者MiniCssExtractPlugin.loader
//其实 postcss-loader 放在 less-loader 之前问题也不大，平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。
]
},
]
},
}
配置方法二
const path = require('path');
const {CleanWebpackPlugin} =require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
//单页面模式
// entry:'./src/index.js',
// output:{
// filename:'index.[contentHash:8].js',
// path:path.resolve(__dirname,'dist'),//输出文件名 hash每次打包都会不一样 contentHash内容变化打包 chunkHash引用文件变化打包
// },
//多页模式
entry:{//多页模式
index:'./src/index.js',
main:'./src/main.js'
},
output:{
filename:'[name].[hash].js',
path:path.resolve(__dirname,'dist'),//输出文件名 hash每次打包都会不一样 contentHash内容变化打包 chunkHash引用文件变化打包
},
module:{
rules:[{
test: /\.css$/,//确定解析的目标
// use 有三种模式 分别是 '' [] {} 字符串是单个 []多个 {} 在laoding中进行其他的配置
use: [{
loader: 'style-loader',
},{
loader: MiniCssExtractPlugin.loader
}, {
loader: 'css-loader',
options: {
importLoaders: 2//标示在使用 css-loader 前先使用后面的两个
}
}, 'postcss-loader','sass-loader']//使用postcss-loader我们需要在根目录下配置两个文件 分别是postcss.config与.browserslistrc
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader'],//从右往左 或者从下往上
}
]
},
}此为我们需要另外在根目录下配置两个文件
文件 postcss.config.js 下面的意思是使用 autoprefixer 插件
module.exports = {
plugins: [
require('autoprefixer')
]
}文件 .browserslistrc 下面的意思是兼容99.5%的浏览器
cover 99.5%polyfill 打补丁
在我们有时候是需要使用打补丁的
方式1 点击如下的地址，勾上你需要的版本，然后上面会生成一个动态的polyfillPolyfill.ioPolyfill.io
https://polyfill.io/v3/url-builder/
方式2 需要安装依赖
npm install --save core-js regenerator-runtime下面是全量导入（并不是最优解，下面还会有自动按需导入）
手动引入 然后再webpack中的配置修改
// webpack.config.js
const path = require('path');
module.exports = {
entry: ['core-js/stable', 'regenerator-runtime/runtime', './main.js'],
output: {
filename: 'dist.js',
path: path.resolve(__dirname, '')
},
mode: 'development'
};如果不依赖前端构建工具单独使用的话，使用姿势很简单，只需要安装依赖 npm install --save core-js regenerator-runtime，然后需要在业务代码中需要进行引入：
import "core-js/stable";
import "regenerator-runtime/runtime"; 上述的手动引入，下面是配置引入 ，useBuiltIn字段的设置
如果 useBuiltIn 设置为 entry，需要手动导入 @babel/polyfill，其使用姿势在上面已经介绍过了，你可以直接导入 core-js 和 regenerator-runtime 也可以在 webpack 的 entry 中设置。useBuiltIn: entry 的作用就是会自动将import "core-js/stable" 和 import "regenerator-runtime/runtime" 转换为目标环境的按需引入。
module.exports = {
presets: [["@babel/preset-env", {
useBuiltIns: "entry",
]],
plugins: []
}
自动按需导入 (自动导入是要配置targets的参数，让babel知道，目标环境是什么)
下面代码是为了提取重复部分，减少全局作用域污染用的
npm install @babel/plugin-transform-runtime如果 useBuiltIns 设置为 usage，则不需要手动导入 polyfill，babel 检测出此配置会自动进行 polyfill 的引入。其配置如下
module.exports = {
presets: [["@babel/preset-env", {
useBuiltIns: "usage",//只有这个参数设置为usage core-js设置才会有用
core-js:"2"//该配置默认值为 2，但是如果我们需要某些最新的 API 时，需要将其设置为 3
],{
targets: {
browsers: [
'last 3 versions',
'Android >= 4.4',
'iOS >= 9.0',
],
},],
plugins: [
"@babel/plugin-transform-runtime",//将重复的方法与类 提取出来。调取这个提取出来方法。从而达到webpac包裹的减少
]
} usage 模式下，Babel 除了会针对目标环境引入 polyfill 的同时也会考虑项目代码代码中使用了哪些 ES6+ 的新特性，两者取一个最小的集合作为 polyfill 的导入。
所以，如果你希望代码尽可能的精简，那么 usage 模式是一个不错的选择，并且这也是官方推荐的使用姿势。
HTML的模板文件配置
上面我们学习了 js image css 就剩下的html
首先我们需要安装一个plugin 介绍地址： html-webpack-plugin - npm 如果你需要更多的配置看这个
npm i html-webpack-plugin -D然后我们看下webpack.config中的配置.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
plugins:[
new HtmlWebpackPlugin({//设置模板文件
template:'./src/index.html',//使用打包后的模板文件
filename:'index.html'//打包后文件的名字
}) ,
]
}上述的这个如果需要在index中假如一些自动以的内容是根据development与production不同，而添加不同的内容。在这里html-webpack-plugin插件已经帮助我们做好了这部分。在你需要打包是自动需要假如的内容 使用
<%= htmlWebpackPlugin.options.urlScript %>要说明的是urlScript 这个是我们自己定义的，你可以叫任何的名字,在传入的时候使用这个变量放入插件的内置中
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
plugins:[
new HtmlWebpackPlugin({//设置模板文件
template:'./src/index.html',//使用打包后的模板文件
filename:'index.html'//打包后文件的名字
urlScript:'<script src="./js/zepto.min.js"></script> '//---<<---就这里
}) ,
]
}未经过html转换的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<head>
<body>
</body>
<%= htmlWebpackPlugin.options.urlScript %>
</html>经过 html-webpack-plugin 的转换之后就会变成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<head>
<body>
</body>
<script src="./js/zepto.min.js"></script> -->>之前的标间就被替换成为了 我们之前的插件设置的内容了，这个很有用
</html>移动端的打印神器VConsole
按钮装
npm install vconsole -D然后在webpack.config.js中配置如下plugin
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,envTypeDist)
},
mode:'development',
plugins:[
//放在这里
new vConsolePlugin({
filter: [], // 需要过滤的入口文件
enable: true // 发布代码前记得改回 false
}),
]
}在package.json中设置使用放下如下
"scripts": {
//--debug 这个就是打开打印的意思
"build:t": "webpack --mode=development --progress --color --debug",
},Vconsole免安装的cdn版本，进去复制一下你需要的版本
然后new一下
<script>
var vConsole = new VConsole();
console.log('hello world')
</script>或者直接使用这个
<script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
console.log('hello world')
</script>js,css:文件的压缩
我们需要使用2个插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [ //专门优化而是用的一个采纳数 可以用来压缩css,js 的
new OptimizeCssAssetsPlugin(),//将插件继续进行使用
new TerserJSPlugin()
]
},
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), // 输出路径
// filename: 'bundle.[hash].js' //输出文件名 hash contentHash chunkHash
filename: 'bundle.js' //输出文件名 hash contentHash chunkHash
},
}暴露全局的变量
全局变量的暴露 存在3中方法
》直接使用cdn的方式
》providePlugin 给每个模块注入变量
》暴露在全局下 expose-loader
第一，直接使用cdn的方式的方式就不在写了，就是在index中下面通过script的方式引用 我们要使用的是下面的插件
const addAssetHtmlCdnWebapckPlugins = require('add-asset-html-cdn-webpack-plugin')形式的话，使用key:vule的形式一直写下去就好了
不太清楚参数，参照：Package - add-asset-html-cdn-webpack-plugin
plugins:[
new addAssetHtmlCdnWebapckPlugins(true,{
vue: '//cdn.bootcss.com/vue/2.5.16/vue.min.js',
// jquery: 'https://code.jquery.com/jquery-3.4.1.min.js',
})第二，安装了相关了模块之后，我们在webpack.config.js这样写上 这个是将木块暴露给每个的模块，
const webpack = require('webpack');
module.exports = {
plugins:[
new CleanWebpackPlugin(),//清除打包文件
new HtmlWebpackPlugin({//设置模板文件
template:'./src/index.html',//使用打包后的模板文件
filename:'index.html'//打包后文件的名字
}) ,
new MiniCssExtractPlugin({//将css与js分开来
filename:'css/[name].css',
}),
//加入我需要暴露给全局是jquery key是暴漏出来给全局的值,后面是相应的模块
new webpack.ProvidePlugin({
'$':'jquery',
})
],
}第三种使用expose-loader TAONPM地址：Package - expose-loader的介绍
npm i expose-loader --Dexpose-loader的用法一 ：在js脚本中如下引用，然后全局就可以使用jquery了,当然前提是必须安装 jquery到本地，这个方式缺点是不容易统一管理
require("expose-loader?$!jquery");第二种 ：再加上面上的引入之后,否则还是会undefind
//第一步
//你使用的js脚本中使用这个
require("expose-loader?$!jquery");
//第二步
//webpack.config.js中的引用
module:{
rules:[
{
test: require.resolve("jquery"),
loader: "expose-loader?$"
}]
}更方便的定位出错的信息-devtool
地址webpack的地址信息：Devtool | webpack 中文文档
关于详细的使用信息及其实验：webpack——devtool里的7种SourceMap模式 - 起舞弄清影wy - 博客园
devtool的调试命令，是webpack中的webpack.config.js中使用的。在这里我们推荐两种模式，在开发模式下
module.exports = {
mode:'development',
devtool:'cheap-module-eval-source-map',//这个是我们推荐的模式，在测试环境下
}在正式的环境下是
module.exports = {
mode:'production',
devtool:'cheap-module-source-map',//这个是我们推荐的模式，在开发环境下
}webpack优化
Tree-shaking&scopeHosting(生成环境下)
Tree-shaking，这个的参数是在webpack.json中配置的，设置
"sideEffects":false会将你虽然在js中引用到了，但是并没有使用到的。打包的时候会帮助你去除掉。但是有个问题就是，我们一般是将index.css在index.js中引用。这个时候，设置这个模式也会将css的文件去掉。这样就出现了问题了。
处理办法。我们需要将把打包的文件中，但凡是css的后缀文件。不被Tree-shaking掉。这是方法是
"sideEffects":["**/*.css"]scopeHosting是减少作用域使用的。在正式环境下。webpack会帮助我们进行优化。减少代码占用的内存，从而提高代码加载的速度。会将没有使用过的代码，去除。
scopeHosting在网上有很多的教程。是webpack4.0上自动优化的，但是尽量使用 import 引入少使用 require( ) ,因为requrie 语法不支持 tree-shking ，会把目标文件整个打包。
看下这个大佬的文章：https://segmentfault.com/a/1190000015689240
懒加载
懒加载分为两种 ：Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载 - 葡萄城技术团队 - 博客园
第一种预先加载：webpackPrefetch 检查浏览器空闲的时候，下载相关文件。
第二需要的时候再加载：webpackPreload 比如一个按钮，点击了。在进行加法计算，而这个加法计算放在了另外的一个脚本a.js里面。用户不点击，则不会下载.
案例：
main.js脚本里面的内容
let sum=(a,b)=>{
return a+b;
}
let minus=(a,b)=>{
return a-b+'minus';
}
// 暴漏出去
export default{
//将这两个参数导出去
sum,minus
} index.js脚本的内容 -点击按钮后才加载相应的相加脚本
let oP = document.createElement('p');
let button = document.createElement('button');
document.body.appendChild(oP);
document.body.appendChild(button);
button.innerHTML = "按钮"
button.addEventListener('click',function(){
//懒加载 点击后动态加载文件
// webpackChunkName webpackPrefetch 预引入 webpackPreload 预加载
import(/*webpackPreload:true*/'./main').then((divideModule)=>{
console.log('divideModule:',divideModule);
let {sum,minus} = divideModule.default;
oP.innerHTML = sum(20,10);
})
})!!! 标记一下，工作中发现了一个问题，有的时候，有些wepack上并不能够这样趣使用。是因为没有添加balse的支持插件
npm i babel-plugin-syntax-dynamic-import找到相应的 babe设置的地方， 或者是 .babelrc 或者是在webpack.config.js中 添加上下面的这个插件
{
"plugins": ["syntax-dynamic-import"]
}懒加载的另外一种方法 使用require
require.ensure(dependencies：String []，
callback：function(require)，
errorCallback：function（error),
chunkName：String
)
//例子
require.ensure([], () => (require(`./index00`)), `index00`); 第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖;
。第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解，就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。
检查打包的构成
安装 webpack-bundle-analyzer - npm
npm install --save-dev webpack-bundle-analyzerconst {CleanWebpackPlugin} =require('clean-webpack-plugin');
plugins:[
new BundleAnalyzerPlugin()
]SplitChunks插件
提供两个链接给大家参考：
webpack： SplitChunksPlugin | webpack
大佬文章：理解webpack4.splitChunks - 渴望做梦 - 博客园
图片压缩
我们需要使用到的是image-webpack-loader，里面的具体参数请参考：image-webpack-loader - npm
//被依赖于file-loader如果你安装了就直接安装image-webpack-loader就好了
npm install file-loader --save-dev
//我们需要安装的loader
npm install image-webpack-loader --save-devrules: [{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',//image-webpack-loader一定要在file-loader先加载
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
}]可能会使用到的功能
热更新
一半我们写的时候，是不需要使用到热更新的。但是比如我们写一个瀑布流的话，就会出现每次更新加载跟满调试起来也会很慢。这个是我们就要使用热更新的功能了。
第一步我们现在webpack.config.js中，对devServe进行设置
devServe:{
hot:true,
}然后我们在代码中这样写
index.js--只的是webpack的入口文件
//被使用的模块脚本-- main.js
export default{
let add = (a,b)=>{
reture a+b;
}
}
//使用的脚本中index.js
let op = document.createElment('p');
if(module.hot){
module.hot.accept('./main',()=>{
let plus = require('./main').default;
op.innerHTML = plus(1,4);
})
}
//打开页面。当你在修改main 中 let add = (a,b)=>{
reture a+b+1+1+1;
}
//你就会发现，你不刷新页面，页面中会自动进行修改的
或者是直接在index.js添加如下的代码
if(module && module.hot) {
module.hot.accept()
}
关于补充：有些文章中会加上一个插件如下--笔者使用上述的方法一九可以实现而更新。加上下面这个这句话，也能是实现
//webpack.config.js
const webpack = require('webpack');
module.exports = {
//....
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin() //热更新插件---添加了这个
]
}webpack.config.js的文件分离
在工作中我们可能需要将测试环境与开发环境与生产环境分开
有两个方面需要注意，第一个拆分之后的文件。加入我们这样写
我们需要先安装一个融合的插件 webpack-merge
npm i webpack-merge -D然后下面是这个三个脚本
//脚本名字 webpack.base.js
const merge = require('webpack-merge');
const dev = require('./webpack.dev');
const prod = require('./webpack.prod');
module.exports = (env) = >{
let base ={
//这里面放进去基础的设置
entry:{},
output:{},
resolve:{},
module:{
rules:[]
},
plugins:[],
}
if(env.development){
return merge(base,dev) //base+dev
}else{
return merge(base,prod) //base+prod
}
}
//脚本名字 webpack.dev.js
module.expots={
mode:'development',//设置环境
devtool:'cheap-module-eval-source-map',//设置报错机制
module:{
rules:[]
},
plugins:[],
devServer:{}
}
//脚本的名字叫 webpack.prod.js
module.expots={
mode:'production',
devtool:'cheap-module-source-map',//这个是我们推荐的模式，在开发环境下
optimization: {
minimizer: [ //压缩的css,js
new OptimizeCssAssetsPlugin(),
new TerserJSPlugin()//压缩js
]
},
plugins:[]
}然后就是package.json文件中，里面中的路径设置一定要设置好
"scripts": {
"build:t": "webpack --mode development --config ./webpack.base",//在这边设置文件的路径
"build:p": "webpack --mode production -config ./webpack.base",//在这边设置文件的路径
"dev": "webpack-dev-server --env.development --config ./webpack.base.js"//在这边设置文件的路径
},修改html更新页面
其实在使用这个功能之前我们可以看下相关的描述：模块热替换指的是页面在尽量不经过刷新的情况下将页面所引用的js或css等模块进行热替换。所以你就不难理解，为什么html的更改新并不能导致页面的更新
在webpack.config.js中添加如下的设置
devServer: {
port: 9000,
hot: true,
contentBase: path.join(__dirname, '/example'),
watchContentBase: true,//----------这个就是设置要不要html文件更改时，重新刷新页面
},resolve的配置
这个功能中主要是我们要做一些一劳永逸的设置
modules： resolve.modules 指定模块需寻找路径 如果第一个路径下没有相应模块就去第二个设置的路径去寻找
//webpack.config.js
module.exports = {
//....
resolve: {
modules: ['./src/components', 'node_modules'] //从左到右依次查找
}
}alias :这是路径别名
//webpack.config.js
module.exports = {
//....
resolve: {
alias:{
'@': path.join(__dirname,'../../src'),//src路径
'@@':path.join(__dirname,'../../'),//根路径
}
}
}extensions：自动尝试拼配后缀，当我们import('index')的试试webpack发现你没有后缀。他会去尝试添加你给的后缀，进行查找相应的文件
//webpack.config.js
module.exports = {
//....
resolve: {
extensions: ['web.js', '.js'] //.json, .css 等等什么的
}
}开发，测试，生产环境的变量设置
下面的方法，在将webpack.config.js拆分为不同环境下不同的设置文件使用这个
例如：base.condig.js development.config.js profuction.config.js ,将不同的环境设置为不同脚本，然后在脚本中设置好相应的环境参数，可以在打包的时候进行使用
//webpack.config.js
//这个更适合参数的传入
module.exports = function (opntion) {
const modeType = opntion.modeType
const enrtyPath= opntion.enrtyPath
plugins: [
//设置全局变量
new webpack.DefinePlugin({
'process.env.NODE_ENV': `'${modeType}'`,
'process.env.assetPath': `'${enrtyPath}'`,
}),
]
}
扫一扫
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
