webpack入门配置精讲
1、项目中安装webpack及webpack
yarn add webpack webpack-cli --dev
2、创建webpack配置文件
webpack.config.js
var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
module.exports = {
// 入口js文件
entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件
//遍历输出文件
output: {
path: DIST_PATH,
filename: "index.js",
},
devServer: {},
//模 块解析
module: {},
//插件
plugins:[]
}
3、package.json中添加快捷指令
"scripts": {
"build": "webpack --config build/webpack.config.js --mode production"
}
4、安装热启动服务器
yarn add webpack-dev-server --dev
5、配置热启动服务
var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
module.exports = {
// 入口js文件
entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件
//遍历输出文件
output: {
path: DIST_PATH,
filename: "index.js",
},
devServer: {
hot:true,// 热更新
contentBase: DIST_PATH,//热启动文件路径
historyApiFallback: true,
inline: true,
host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
port: 3000,//端口号
disableHostCheck: true,//
useLocalIp:true,//是否使用ip打开页面
proxy:{},//跨域映射
https:true//支持https
},
//模 块解析
module: {},
//插件
plugins:[]
}
6、package.json中添加快捷指令
"scripts": {
"build": "webpack --config build/webpack.config.js --mode production"，
"start": "webpack-dev-server --config build/webpack.config.js --mode development --open"
}
7、webpack支持多入口文件打包
var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件
module.exports = {
// 入口js文件
//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件 方式一
entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'] ,// 方式二
//遍历输出文件
output: {
path: DIST_PATH,
filename: "index.js",
},
devServer: {
hot:true,// 热更新
contentBase: DIST_PATH,//热启动文件路径
historyApiFallback: true,
inline: true,
host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
port: 3000,//端口号
disableHostCheck: true,//
useLocalIp:true,//是否使用ip打开页面
proxy:{},//跨域映射
https:true//支持https
},
//模 块解析
module: {},
//插件
plugins:[]
}
8、webpack支持多出口文件打包
var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件
module.exports = {
// 入口js文件
//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件 方式一
//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
//遍历输出文件
entry:{
index:SRC_PATH+'/index.js',
test:SRC_PATH+'/test.js'
},
output: {
path: DIST_PATH,
filename: [name].[chunkhash:5].js,//支持多文件输出，及hash混淆防止服务器缓存,并控制hash位数为5位
},
devServer: {
hot:true,// 热更新
contentBase: DIST_PATH,//热启动文件路径
historyApiFallback: true,
inline: true,
host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
port: 3000,//端口号
disableHostCheck: true,//
useLocalIp:true,//是否使用ip打开页面
proxy:{},//跨域映射
https:true//支持https
},
//模 块解析
module: {},
//插件
plugins:[]
}
9、webpack支持自动检索多入口文件打包
首先安装glob
yarn add glob --dev
更改配置文件
var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var glob = require('glob');//引入glob模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件
var entryFiles={};
var files=glob.sync(path.join(SRC_PATH,'/**/*.js'));//正则匹配获取SRC_PATH下面所有文件路径
files.forEach(function(file,index){
var subkey = file.match(/src\/(\S*)\.js/)[1];//正则表达获取文件名
entryFiles[subkey]=file;
})
module.exports = {
// 入口js文件
//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件 方式一
//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
//遍历输出文件
entry: entryFiles,
output: {
path: DIST_PATH,
filename: [name].[chunkhash:5].js,//支持多文件输出，及hash混淆防止服务器缓存,并控制hash位数为5位
},
devServer: {
hot:true,// 热更新
contentBase: DIST_PATH,//热启动文件路径
historyApiFallback: true,
inline: true,
host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
port: 3000,//端口号
disableHostCheck: true,//
useLocalIp:true,//是否使用ip打开页面
proxy:{},//跨域映射
https:true//支持https
},
//模 块解析
module: {},
//插件
plugins:[]
}
10、webpack支持自动生成html模版
首先安装html-webpack-plugin
yarn add html-webpack-plugin --dev
更改配置文件
var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var glob = require('glob');//引入glob模块
var htmlWebpackPlugin = require('html-webpack-plugin');
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件
var entryFiles={};
var files=glob.sync(path.join(SRC_PATH,'/**/*.js'));//正则匹配获取SRC_PATH下面所有文件路径
files.forEach(function(file,index){
var subkey = file.match(/src\/(\S*)\.js/)[1];//正则表达获取文件名
entryFiles[subkey]=file;
})
module.exports = {
// 入口js文件
//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件 方式一
//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
//遍历输出文件
entry: entryFiles,
output: {
path: DIST_PATH,
filename: [name].[chunkhash:5].js,//支持多文件输出，及hash混淆防止服务器缓存,并控制hash位数为5位
},
devServer: {
hot:true,// 热更新
contentBase: DIST_PATH,//热启动文件路径
historyApiFallback: true,
inline: true,
host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
port: 3000,//端口号
disableHostCheck: true,//
useLocalIp:true,//是否使用ip打开页面
proxy:{},//跨域映射
https:true//支持https
},
//模 块解析
module: {},
//插件
plugins:[
new htmlWebpackPlugin({
filename: DIST_PATH+'index.html',//生成后导出的文件路径
title:'测试',//导出文件的标题,
template:path.resolve(__dirname,'../index.html'),//需要参照的html文件路径
inject:true,//body head true,
hash:true,
minfy:true,//是否压缩
chunks:['index']//只动态引入哪些文件配置
})
]
}
html中动态标题配置
<%=htmlWebpackPlugin.options.title%>
11、打包提取公共组件
在module.exports 中添加属性
optimization: {
splitChunks: {
chunks: 'initial', //async 异步(import()语法) initial(同步import xxx from 'xxx') all(所有)
minSize: 10000, // 模块的最小体积
minChunks: 1, // 模块的最小被引用次数
maxAsyncRequests: 5, // 按需加载的最大并行请求数
maxInitialRequests: 3, // 一个入口最大并行请求数
automaticNameDelimiter: '~', // 抽取出来的文件的自动生成名字的分割符，默认为 ~；
name: true, // 抽取出来文件的名字，默认为 true，表示自动生成文件名；
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10, // 优先级配置项
minChunks: 1, // 表示被引用次数，默认为1
reuseExistingChunk: true
}
}
}
}
- 课程地址
- WebPack提取公共组件 项目
- 入门 Webpack，看这篇就够了
- 一劳永逸」由浅入深配置webpack4
- webpack打包原理 ? 看完这篇你就懂了 !