我用webpack的时候找不到vender.js

Question

我正在使用webpack，遇到了一个问题，我想在公众面前制作一个html，但我无法成功。

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

​

​

这是我的集线器

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插件文档通知Keep the name consistent with output.library，但应用于使用的的位置-- dll (同时使用DllReferencePlugin)，而不是创建 where (DllPlugin)的位置。

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

webpack的dll配置如下所示：

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

它将您的dll文件写入rootDir/dist，而不是按您的意愿编写rootDir/public/dist。

因此，解决这个问题的方法是将其更改为path: __dirname + 'public/dist'。

在这些修复之后，您的代码开始对我起作用了。如果你还有其他问题，可以随意提问;)