webpack基础配置

const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

// 导出配置
module.exports = {
devServer: {
open: true, // yarn 之后自动打开浏览器
port: 3000 // 默认端口
},
entry: {
qf:’./src/qf.js’,
about:’./src/about.js’,
home:’./src/home.js’,
},
output: {
path: path.resolve(process.cwd(), ‘dist’),
filename: ‘static/js/[name]-[chunkhash:7].js’
},
//loader 让webpack可以打包项目中的非js文件
module: {
rules: [
{ //使css文件生效
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 83: …], }̲, {…/i,
// use: [‘style-loader’, ‘css-loader’, ‘sass-loader’,],
use: [MiniCssExtractPlugin.loader, ‘css-loader’, ‘sass-loader’],
},
{
test: /.(png|jpe?g|gif|jpg)KaTeX parse error: Expected 'EOF', got '}' at position 195: …}, }̲, {…/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’]
}
}
}
],
},
plugins: [
//使css文件单独存放
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: ‘static/css/[name]-[chunkhash:7].css’,
chunkFilename: ‘[id].css’,
}),
//说明：功能让webpack变得更强
//作用：给public/index.js自动引入打包后的js等文件
//new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
// 自定义变量
title: “神龙教主WEBPACK脚手架”,
desc: “神龙教主、洪福齐天、寿与天齐”,
// 输出到dist下面的名称、默认index.html
filename: ‘index.html’,
// 模板文件
template: ‘public/index.html’
})
]
};