4.整个package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"dev": "webpack && webpack-dev-server --config webpack.config.js",
"build": "webpack --mode production"
},
"keywords": [],
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"glob": "^7.1.3",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"transfer-webpack-plugin": "^0.1.4",
"url-loader": "^1.1.2",
"webpack": "^4.23.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"@babel/runtime": "^7.1.2",
"babel-polyfill": "^6.26.0",
"copy-webpack-plugin": "^5.1.1",
"jquery": "^1.12.4"
},
"browserslist": [
"defaults",
"> 1%",
"last 2 versions",
"not ie <= 8",
"ios > 7"
],
"author": "",
"license": "ISC"
}
var webpack = require('webpack');
var path = require('path');
var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var CopyWebpackPlugin=require('copy-webpack-plugin');
var autoprefixer = require('autoprefixer');
var os = require('os');
var portfinder = require('portfinder');
var fs = require('fs');
var ports = fs.readFileSync('./port.json', 'utf8');
ports = JSON.parse(ports);
portfinder.basePort = "8080";
portfinder.getPort(function(err, port) {
ports.data.port = port;
ports = JSON.stringify(ports,null,4);
fs.writeFileSync('./port.json',ports);
});
//获取本机ip
function getIPAdress(){
var interfaces = os.networkInterfaces();
for(var devName in interfaces){
var iface = interfaces[devName];
for(var i=0;i= 8','Firefox >= 20', 'Safari >= 5', 'Android >= 4','Ios >= 6', 'last 4 version']
})
]
}
}]
},
{
test:/\.scss$/,
//use:['style-loader','css-loader','sass-loader','postcss-loader']//css不分离写法
//css分离写法
use:[MiniCssExtractPlugin.loader,"css-loader",{
loader: "postcss-loader",
options: {
plugins: [
autoprefixer({
browsers: ['ie >= 8','Firefox >= 20', 'Safari >= 5', 'Android >= 4','Ios >= 6', 'last 4 version']
})
]
}
},"sass-loader"]
},
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[
{
loader:'url-loader',
options:{
limit:5000
}
}
]
}
]
},
mode:"development",
performance:{
hints:false
},
//插件
plugins:[
new MiniCssExtractPlugin({
filename: "css/[name].css"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
}),
new CopyWebpackPlugin([
{
from: __dirname+'/src/public',
to: __dirname+'/dist/public',
toType:'dir',
},
]),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径
historyApiFallback: false,
hot: true,
inline: true,
stats: 'errors-only',
host: host,
port: ports.data.port,
overlay: true,
open:true,
openPage:'index.html'
}
}
//配置页面
var entryObj = getEntry();
var htmlArray = [];
Object.keys(entryObj).forEach(function(element){
htmlArray.push({
_html:element,
title:'',
chunks:[element]
})
})
//自动生成html模板
htmlArray.forEach(function(element){
module.exports.plugins.push(new HtmlWebpackPlugin(getHtmlConfig(element._html,element.chunks)));
})