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回答

吕小鸣

2019-04-04

同学你好,可以把代码打个zip发到我的邮箱441403517@qq.com

0
1
qq_雨籦_0
谢谢啦看了一下午已经搞定了????感谢大佬一直以来的耐心解答
2019-04-04
共1条回复

移动Web App开发之实战美团外卖

运用React全家桶技术,从0到1学习全面的移动 Web APP 开发技术。

389 学习 · 235 问题

查看课程