Question

我正在使用webpack并遇到问题。我想在公共场合制作HTML，但我无法成功。

当我使用npm run dev时，遇到问题

这是我的github

https://github.com/wohuifude123/webpack20180315

补充

我已经多次读过你的回答了，然后我修改了webpack.dll.js

output: {
    path: __dirname + 'public/dist',
    filename: '[name].[chunkhash:8].js',
    library: '[name]_[chunkhash:8]'
},

然后我修改webpack.dev.js

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
// 引入dev-server配置文件
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// a third party
const manifest = require('./vender-manifest.json');
const _venderName = manifest.name.split('_');
const venderName = _venderName[0] + '.' + _venderName[1];

module.exports = merge(common, {

    output: { //打包路径
        //filename: '[name].bundle.js', //出口文件名
        // filename: '[name].[chunkhash].js',
        // 可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径
        path: __dirname + 'dist', //打包路径
        publicPath:'dist/', // 指定publicPath
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        library: '[venderName].js'
    },
    devtool: 'source-map',
    devServer: {
        contentBase: [path.join(__dirname, "./public")], // 本地服务器 加载页面 所在的目录
        host: '127.0.0.1',
        compress: true,
        port: 6600,
        open: false // 将自动打开浏览器
    },
    plugins:[
        new BundleAnalyzerPlugin({
            analyzerMode: 'server', // static/disabled
            analyzerHost: '127.0.0.1',
            analyzerPort: 9900,
            openAnalyzer: false
        })
    ]
});

最后我修改了webpack.common.js

plugins: [
        new CleanWebpackPlugin(['dist'], { // 清除 dist 文件中的内容
            exclude: [venderName + '.js'] // 排除 提取出的 第三方的 js
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./vender-manifest.json') // 加载 manifest.json
        }),
        new HtmlWebpackPlugin({
            filename: './index.html',
            template: './src/index.html',
            //favicon: './src/favicon.ico',
            alwaysWriteToDisk: true // 是否开启 new HtmlWebpackHarddiskPlugin()
        }),
        new HtmlWebpackIncludeAssetsPlugin({
            assets: [venderName + '.js'],
            append: false // 不会被 webpack 自动打包
        }),
        // new HtmlWebpackIncludeAssetsPlugin({
        //     assets: ['config/env-config.js'],
        //     append: false, // 不会被 webpack 自动打包
        //     hash: true
        // }),
        new HtmlWebpackHarddiskPlugin(), // 将[venderName + '.js']和['env-config.js']放进 index.html 中
        new webpack.DefinePlugin({ // 创建一个编译时可以配置的全局常量
            PRODUCTION: JSON.stringify(true),
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        })
    ]

虽然我仔细阅读了你的答案，但我无法理解细节。

我尝试修改很多地方，但产品无法正常工作。

Answer 1

您的代码中存在两个问题：

您没有将dll库与应用的输出库匹配：

您的webpack.dll.js：

output: {
    // some properties
    library: '[name]_[chunkhash:8]'
}

//...

new webpack.DllPlugin({
    name: '[name]_[chunkhash:8]'
})

您的webpack.dev.js：

const manifest = require('./vender-manifest.json');

//...

module.exports = merge(common, {
    output: {
        // some properties
        library: manifest.name // this was missing
    }
}

我看到你正在做的是将DllPlugin name与dll输出文件库匹配，但事实并非如此。

webpack dll plugin docs通知Keep the name consistent with output.library，但申请使用 dll（使用DllReferencePlugin时），而不是 创建他们（DllPlugin）。

您没有在dist文件夹中创建dll：

您的webpack dll配置如下：

output: { path: __dirname + '/dist' }

将您的dll文件写入rootDir/dist，而不是rootDir/public/dist。

因此，对此问题的修复只是将其更改为path: __dirname + 'public/dist'。

修复后，您的代码开始为我工作。如果您有任何其他问题，请随时询问;）

当我使用webpack时，我无法找到vender.js

1 个答案: