webpack是什么
webpack是一种前端资源构建工具,一个静态的模块打包器(module bundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less)都会作为模块处理。
五个核心概念
Entry
入口:提示webpack以哪一个文件为入口起点打包,分析构建内部依赖图。
Output
输出:提示webpack打包后的资源bundles输出到哪里去,以及如何命名
Loader
Loader:相当于翻译官,让webpack能够取处理哪些非JavaScript文件(webpack本身只能理解JavaScript)
Plugins
插件:可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩,一直到重新定义环境中的变量。
Mode
development
会将DefinePlugin中process.env.NODE_ENV的值设置为development。
能让代码本地调试运行的环境
production
会将DefinePlugin中process.env.NODE_ENV的值设置为production
能让代码优化上线运行的环境
搭建一个基础开发环境
webpack.config.js
webpack配置文件,webpack开发环境配置基本都在这里写
/*
开发环境配置:能让代码运行
运行项目指令:
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包,没有输出
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader的配置
{
// 处理less资源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理css资源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
outputPath: 'imgs'
},
type: 'javascript/auto'
},
{
// 处理html中img资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
static: resolve(__dirname, 'build'),
//启动gzip压缩
compress: true,
port: 3000,
open: true
}
};
webpack5踩得坑
在devServer配置中出口文件配置要使用static而不是contextBase
使用devServer之后打包命令在Webpack5要用npx webpack serve而不是npx webpack-dev-server
处理图片资源的时候要在rules的具体规则中加一句type: 'javascript/auto'来阻止Webpack5自动打包