/*
* webpack基础配置
*/
// resolve用来拼接绝对路径
const { resolve } = require('path');
// 引入html插件，引入前，需要先下载该插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入webpack插件
var webpack = require('webpack');
module.exports = {
// 入口文件位置
entry: './src/index.jsx',
output: {
filename: 'index.js',
// 拼接路径
path: resolve(__dirname, 'dist')
},
// loader配置，webpack只能解析json文件和js文件，其他的样式资源无法解析，
// 必须使用对应的loader
module: {
// 详细的loader配置
rules: [
// react(jsx)文件的处理配置，需要提前下载babel-loader @babel/core @babel/preset-env、
// @babel/preset-react、react-dom和react才能使用
{
test: /\.m?jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
}
}
},
// css配置
{
test: /\.css$/,
use: [
// use中的执行顺序为：css-loader-->style-loader
// 创建一个style标签，将js中的样式字符串插入进行，添加到html文件head中
'style-loader',
// css-loader将css样式转变成为一个commonjs模块，以样式字符串的格式加载到js文件中
'css-loader'
]
},
// sass文件配置
{
test: /\.s[ac]ss$/,
use: [
// style-loader创建一个style便签，将js中的样式资源插入，添加到html中的head中
'style-loader',
// 编译后的css文件被css-loader编译成commonjs模块，以样式资源的的格式加载到js文件中
'css-loader',
// sass-loader将sass文件编译成为css文件
'sass-loader'
]
},
// 处理图片资源，需要下载两个包：url-loader和file-loader，这点需要特别注意，另外处理不了html中
// img标签的图片
{
test: /\.(jpg|png|gif|jpeg)$/,
// use中如果是数组形式，则是要处理多个loader，如果只有一个loader，则不需要使用数组形式
// 直接是loader: '需要的loader'，注意：单个的话不是use，而是loader
loader: 'url-loader',
options: {
// 图片大小如果小于10kb，就会被base64方式处理，10是一个可变的数字，理论上可以是任意的数字，但世纪
// 的使用中最好设置为8~12之间的数字
// base64处理的优点：减少请求的数量，减轻服务器压力
// 缺点：图片的体积会更大，文件请求速度更慢
// 总结：综合考虑，太大的图片一般不会进行base64处理，8～12kb的图片才进行
limit: 8 * 1024,
// 问题：因为url-loader默认使用的是es6模块化解析的，html-loader引入的是commonjs模块化，
// 解析时会出现问题：[object Module]
// 解决：关闭url-loader的es6，使用commonjs
esModule: false,
// 给图片进行重命名，减少名字太长占用过多的资源
// [hash: 10]取图片的hash的前10位
// [ext]：取文件原来的扩展名
name: '[hash:10].[ext]',
}
},
// 专门负责处理html中的img图片，负责引入img，从而能被url-loader处理
{
test: /\.html$/,
loader: 'html-loader'
},
// 打包其他的资源(除css/js/html资源以外的资源)
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
loader: 'url-loader'
name: '[hash:10].[ext]'
}
]
},
// plugins配置
plugins: [
// html插件配置
// 默认创建一个空的html文件，没有任何结构样式，自动引入打包输入的所有资源，开发者不要二次引入资源
// 需求： 需要有结构的html文件
// 解决： 添加template配置项，指定一个html文件
new HtmlWebpackPlugin(
{
template: './src/index.html'
}
),
],
// 模式配置
mode: 'development', // 开发模式
// mode: 'production', //生产模式
// 开发服务器devServer，用来实现自动化(自动编译，自动打开浏览器，自动刷新浏览器)
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer的指令为：npx webpack-dev-server
// 如果启动的命令是：webpack，则会有相应的打包内容输出
devServer: {
// 基本的执行目录
contentBase: resolve(__dirname, 'dist'),
// 启用gzip压缩
compress: true,
// 端口号
port: 3000
}
}
/*
* webpack基础配置
*/
// resolve用来拼接绝对路径
const { resolve } = require('path');
// 引入html插件，引入前，需要先下载该插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件位置
entry: './src/index.jsx',
output: {
filename: 'index.js',
// 拼接路径
path: resolve(__dirname, 'dist')
},
// loader配置，webpack只能解析json文件和js文件，其他的样式资源无法解析，
// 必须使用对应的loader
module: {
// 详细的loader配置
rules: [
// react(jsx)文件的处理配置，需要提前下载babel-loader @babel/core @babel/preset-env、
// @babel/preset-react、react-dom和react才能使用
{
test: /\.m?jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
}
}
},
// css配置
{
test: /\.css$/,
use: [
// use中的执行顺序为：css-loader-->style-loader
// 创建一个style标签，将js中的样式字符串插入进行，添加到html文件head中
'style-loader',
// css-loader将css样式转变成为一个commonjs模块，以样式字符串的格式加载到js文件中
'css-loader'
]
},
// sass文件配置
{
test: /\.s[ac]ss$/,
use: [
// style-loader创建一个style便签，将js中的样式资源插入，添加到html中的head中
'style-loader',
// 编译后的css文件被css-loader编译成commonjs模块，以样式资源的的格式加载到js文件中
'css-loader',
// sass-loader将sass文件编译成为css文件
'sass-loader'
]
},
// 处理图片资源，需要下载两个包：url-loader和file-loader，这点需要特别注意，另外处理不了html中
// img标签的图片
{
test: /\.(jpg|png|gif|jpeg)$/,
// use中如果是数组形式，则是要处理多个loader，如果只有一个loader，则不需要使用数组形式
// 直接是loader: '需要的loader'，注意：单个的话不是use，而是loader
loader: 'url-loader',
options: {
// 图片大小如果小于10kb，就会被base64方式处理，10是一个可变的数字，理论上可以是任意的数字，但世纪
// 的使用中最好设置为8~12之间的数字
// base64处理的优点：减少请求的数量，减轻服务器压力
// 缺点：图片的体积会更大，文件请求速度更慢
// 总结：综合考虑，太大的图片一般不会进行base64处理，8～12kb的图片才进行
limit: 8 * 1024,
// 问题：因为url-loader默认使用的是es6模块化解析的，html-loader引入的是commonjs模块化，
// 解析时会出现问题：[object Module]
// 解决：关闭url-loader的es6，使用commonjs
esModule: false,
// 给图片进行重命名，减少名字太长占用过多的资源
// [hash: 10]取图片的hash的前10位
// [ext]：取文件原来的扩展名
name: '[hash:10].[ext]',
}
},
// 专门负责处理html中的img图片，负责引入img，从而能被url-loader处理
{
test: /\.html$/,
loader: 'html-loader'
},
// 打包其他的资源(除css/js/html资源以外的资源)
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
loader: 'url-loader'
name: '[hash:10].[ext]'
}
]
},
// plugins配置
plugins: [
// html插件配置
// 默认创建一个空的html文件，没有任何结构样式，自动引入打包输入的所有资源，开发者不要二次引入资源
// 需求： 需要有结构的html文件
// 解决： 添加template配置项，指定一个html文件
new HtmlWebpackPlugin(
{
template: './src/index.html'
}
),
// 开发服务器devServer，用来实现自动化(自动编译，自动打开浏览器，自动刷新浏览器)
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer的指令为：npx webpack-dev-server
// 如果启动的命令是：webpack，则会有相应的打包内容输出
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [precss, autoprefixer];
},
devServer: {
contentBase: "dist", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port: 8686,
compress: true
}
}
})
],
// 模式配置
mode: 'development', // 开发模式
// mode: 'production', //生产模式
}