一、 webpack 五个核心概念
1.1 Entry 入口(Entry)
指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。
1.2 Output 输出(Output)
指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。
1.3 Loader
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)
1.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。
1.5 Mode
模式(Mode)指示 webpack 使用相应模式的配置。
二、编译打包应用
初始化 package.json -- npm init
下载并安装 webpack --npm install webpack webpack-cli -g
开发环境指令:webpack src/js/index.js -o build/js/built.js --mode=development/production打包入口及输出位置 打包环境配置
三、配置webpack
const { resolve } = require('path'); // node 内置核心模块,用来处理路径问题。
module.exports = {
mode: 'development' //开发环境 production //生产环境
entry: './src/js/index.js', // 单入口文件
// entry: { //多入口 会打包双方重复文件
// index: './src/index.js',
// another: './src/another-module.js'
// },
// entry: { //多入口 lodash不会重复打包
// index: { import: './src/index.js', dependOn: 'shared' },
// another: { import: './src/another-module.js', dependOn: 'shared' },
// shared: 'lodash'
// },
output: { // 输出配置
filename: './built.js', // 输出文件名
path: resolve(__dirname, 'dist'), //打包后的输出位置 webpack当前目录下的 dist
//contenthash根据内容变化生成文件名 不变不修改名字会用缓存
filename: 'scripts/[name].[contenthash].js', //'bundle.js', //打包后的文件名 多个入口不能写固定一个名字
clean: true, //打包后清除上次内容
assetModuleFilename: 'images/[contenthash][ext]', //静态文件打包地址/文件名
publicPath: ''
},
devtool: 'inline-source-map', //打包后找到真实源代码位置
devServer: { //实时更新
static: './dist',
hot: true, //开启热更新
compress: true, // 启动gzip压缩
port: 3000, // 端口号
open: true // 自动打开浏览器
proxy: { //代理
'/api': {
target: 'http://localhost:4000',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
module: {
rules: [
// 详细loader配置
// 不同文件必须配置不同loader处理
{
test: /\.(jpg|gif|png)/,
use: 'url-loader',
option: {// 图片大小小于8kb,就会被base64处理// 优点: 减少请求数量(减轻服务器压力)// 缺点:图片体积会更大(文件请求速度更慢)
esModule: true,
limint: 5 * 1024, //图片是否转base64
name: '[hash: 10].[ext]' //图片命名
}
},
{
test: /\.(css|less)$/,
// use: ['style-loader', 'css-loader', 'less-loader'] //从后往前编译 先解析在编译 行内样式
use: ['MinCssExtractPlugin.loader', 'css-loader', 'less-loader'], //把css文件打包到一个css 用link引入到html中
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-runtime' //为promise解决
]
]
}
}
},
]
},
plugins: [
webpack.HotModuleReplacementPlugin(), //热更新
new HtmlWebpackPlugin({
template: './index.html', //要打包的html
filename: 'app.html', //html打包后的名字
inject: 'body', //script 标签生成地址
collapseWhitespace: true, //压缩移除空格
removeComments: true, //压缩移除注释
}),
new MinCssExtractPlugin({ //把css文件打包到一个新css 用link引入到html中 可修改地址/文件名
filename: 'styles/[contenthash].css'
})
],
optimization: {
minimizer: [
new CssMinimizerWebpackPlugin() //还需将mode改为production 会压缩css代码
],
splitChunks: {
// chunks: 'all',// 公共文件 lodash不会重复打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chuns: 'all'
}
}
}
}
};