const path = require('path')
// 将css或者scss文件打包到一个css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 打包后创建一个html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//
const webpack = require('webpack')
module.exports = {
mode:"development",
// dev监听运行
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 8080,
//允许设计组件的热替换处理
host:true
},
entry:{
njl:"./src/index.js",
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
// 需要上面引入webpack
// 作用就是可以设置全局的常量
// 可以在任何位置使用
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify('https://www.njl.com')
}),
new HtmlWebpackPlugin({
title:"njl_APP",
filname:"index.html",
template:"./public/index.html"
}),
],
module:{
rules:[
// 解析图片
{
test:/\.(png|jpg|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
// 控制图片如果大于8K就不会转换成base64位进入js文件而是变成图片格式
limit: 30000,
},
},
],
},
// 解析es7,es6变成es5兼容语法
{
test: /\.(m?js|jsx)$/,
// 排除一下包中的js
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins:['@babel/plugin-transform-react-jsx']
}
}
},
// 编译打包scss的文件处理
// style-loader css-loader sass-loader
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
]
}
}