let path = require("path");
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");//压缩js
const miniCssExtractPlugin = require("mini-css-extract-plugin");//剥离css
const optimizeCssAssetsplugin = require("optimize-css-assets-webpack-plugin");//压缩css
const htmlWebpackPlugin = require('html-webpack-plugin') //生成index.html
module.exports = {
entry:"./js/Tab.jsx",
output:{
path:path.join(__dirname,"./wpkfile"),
filename:"demo.js"
},
module:{
rules:[
//css&less
{
test:/\.css$/,
use:[
//打包压缩上线时
// miniCssExtractPlugin.loader,
// "css-loader",
// "less-loader"
//开发时
{
loader:"style-loader"
},
{
loader:"css-loader"
}
]
},
//less
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
//css中引入图片、文字图标
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=50000&name=[path][name].[ext]'
},
//jsx
{
test:/\.jsx|\.js$/,
use: [
{
loader: 'babel-loader',
options: { presets: ['env','react', 'stage-0'] }
}
],
}
]
},
// devtool:false, //打包压缩上线时
devtool:"#cheap-module-eval-source-map",//开发时映射文件
//剥离、压缩（打包压缩上线时）
// plugins:[
// new miniCssExtractPlugin({
// filename:"Table.min.css"
// }),
// new htmlWebpackPlugin()
// ],
// optimization:{
// minimizer:[
// new optimizeCssAssetsplugin(),
// new uglifyJsPlugin()
// ]
// },
mode:"development",
resolve:{
extensions:[".css",".js",".jsx",".less"] //补全名称
}
}
网友评论