webpack4问题代码
来源:6-9 评价页面开发(UI开发)

qq_雨籦_0
2019-04-04
let path = require(‘path’);
let htmlWebpackPlugin = require(‘html-webpack-plugin’);
let miniCssExtractPlugin = require(‘mini-css-extract-plugin’);
let optimizeCSS = require(‘optimize-css-assets-webpack-plugin’);
let uglifyjs = require(‘uglifyjs-webpack-plugin’);
let webpack = require(‘webpack’);
let srcRoot = path.resolve(__dirname, ‘src’);
const fs = require(‘fs’);
const pageDir = path.resolve(srcRoot, ‘page’);
const mainFile = ‘index.js’;
let cleanWebpackPlugin = require(‘clean-webpack-plugin’);
let copyWebpackPlugin = require(‘copy-webpack-plugin’);
function getHtmlArray(entryMap) {
let htmlArray = [];
Object.keys(entryMap).forEach((key) => {
let fullPathName = path.resolve(pageDir, key);
let fileName = path.resolve(fullPathName, key + ‘.html’);
if (fs.existsSync(fileName)) {
htmlArray.push(new htmlWebpackPlugin({
filename: 'page/' + key + '.html',
template: fileName,
chunks: [key]
}));
}
});
return htmlArray;
}
function getEntry() {
let entryMap = {};
fs.readdirSync(pageDir).forEach((pathname) => {
console.log(pathname);
let fullPathName = path.resolve(pageDir, pathname);
let stat = fs.statSync(fullPathName);
let fileName = path.resolve(fullPathName, mainFile);
if (stat.isDirectory() && fs.existsSync(fileName)) {
entryMap[pathname] = fileName;
}
});
return entryMap;
}
const entryMap = getEntry();
const htmlArray = getHtmlArray(entryMap);
module.exports = {
/watch: true,/
/watchOptions: {
poll: 1000,/!一秒问我多少次!/
aggregateTimeout: 50, /!防抖 输入代码的时候输入完成过多少毫秒打包!/
ignored: /node-moudles/ /!忽略文件!/
},/
devtool: ‘cheap-module-eval-source-map’,
/optimization: {
minimizer: [
new uglifyjs({
cache: true,
parallel: true,
sourceMap: true
}),
new optimizeCSS()
]
},/
mode: ‘development’, //开发模式
entry: entryMap, //简单入口
output: {
filename: “[name].js”, //简单出口
path: path.resolve(__dirname, ‘dev’), //相对路径,
},
devServer: {
contentBase: path.resolve(__dirname, 'dev'),
port: 3000,
hot: true,/*热更新*/
inline: true, /*热更新*/
/*proxy: {
'/api': {
target: "http://11.163.122.62:7001",
pathRewrite:{ '^/api': '' },
changeOrigin: true
}
}*/
/*proxy: {
'/api': {
target: 'http://11.163.122.62:7001',
pathRewrite: { '^/api': '' },
changeOrigin: true,
secure: false, // 接受 运行在 https 上的服务
}
}*/
},
module: {
rules: [
{
test: /\.css$/, use: [
miniCssExtractPlugin.loader,
{loader: "css-loader"}
]
},
{
test: /\.less$/, use: [
miniCssExtractPlugin.loader,
{loader: "css-loader"},
{loader: "less-loader"},
{
loader: "postcss-loader", options: {
plugins: [require('autoprefixer')]
}
}
]
},
{
test: /\.js$/, use: [{
loader: "babel-loader", options: {
presets: [
'@babel/preset-env' /*es6代码转化*/
],
plugins: [
'@babel/plugin-proposal-class-properties', /*转化class语法糖*/
"@babel/plugin-transform-runtime" /*转化生成器 async 等*/
],
}
}
],
include: path.resolve(__dirname, 'src')
},
{
test: /\.(png|jpg|jpeg)$/, use: [{
loader: 'url-loader',
options: {limit: 8192, outputPath: 'img/'},
}], include: srcRoot
}
]
}
,
plugins:
[
new miniCssExtractPlugin({
filename: 'css/style.css'
})
/*new miniCssExtractPlugin({
filename: 'css/style.css'
}),
new webpack.ProvidePlugin({
'$': 'jquery'
}),
/!* new cleanWebpackPlugin('dist'),*!/
new copyWebpackPlugin([{from: './src/static/', to: './static/'}]),
new webpack.BannerPlugin("by hu")*/
].concat(htmlArray),
/*externals:
{
jquery: '$'
}*/
}
帮忙看看 如果没有dev目录就报错404
1回答
-
同学你好,可以把代码打个zip发到我的邮箱441403517@qq.com
012019-04-04
相似问题