webpack 打包正确后报错

Question



我浏览器报错是这个,我看了所有代码IDE没有报错说缺少逗号或者括号
我编译时成功的

我的webpack.config.js代码

var path = require("path"),

webpack = require("webpack"),
srcDir = path.resolve(process.cwd(), 'src'),
imagePath = path.join(srcDir, 'img'),
cssPath = path.join(srcDir, 'css'),
jsPath = path.join(srcDir, 'js'),
viewsPath = path.join(srcDir, 'views'),
nodeModulesPath = path.resolve(__dirname, 'node_modules'),
libPath = path.resolve(__dirname, 'src/js/lib'),
HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

cache: true,
entry: {
    index: ["babel-polyfill", path.join(__dirname, "src/index.jsx")],
},

output: {
    publicPath: "/",
    path: path.join(__dirname, "build/static"),
    filename: "core/[name].js",
    chunkFilename: "core/[name].js"
},
resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
        'css': cssPath,
        'js': jsPath,
        'img': imagePath,
        'views': viewsPath,
    },
},
module: {
    rules: [{
        test: /\.css$/,
        use: [
            "style-loader",
            "css-loader"
        ]
    }, {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
    }, {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: [nodeModulesPath, libPath],
        include: [srcDir],
        options: {
            presets: ['es2015']
        }
    }, {
        test: /\.jsx$/,
        loader: 'babel-loader',
        exclude: [nodeModulesPath, libPath],
        include: [srcDir],
        options: {
            presets: ['react', 'es2015'],
            "plugins": [
                ["import", [{"libraryName": "antd", "style": "css"}]]
            ]
        }
    },
        {
            test: /\.(png|jpg|gif)$/,
            use: "url-loader?name=img/[name].[ext]"
        }]
},
plugins: [
    new webpack.DllReferencePlugin({ // 加快webpack打包速度
        context: __dirname,
        manifest: require('./build/static/vendor-manifest.json')
    }),
    new HtmlWebpackPlugin({
        template: path.join(__dirname, 'build/html/index_dll.html'),
        inject: true
    }),
    new webpack.LoaderOptionsPlugin({
        options: {
            postcss: function () {
                return [precss, autoprefixer];
            },
            devServer: {
                contentBase: "/", //本地服务器所加载的页面所在的目录
                colors: true, //终端中输出结果为彩色
                historyApiFallback: true, //不跳转
                inline: true //实时刷新
            }
        }
    })
]

}

我的webpack.dll.config.js 代码

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {
    vendor:['react','react-dom','jquery','antd','react-router'],
},
output: {
    publicPath: '/',
    path: path.join(__dirname, 'build/static'),
    filename: '[name].[hash:5].dll.js',
    library: '[name]_library'
},
resolve: {
    extensions: ['.js', '.jsx', '.json']  //现在你require文件的时候可以直接使用require('file')，不用使用require('file.jsx')
},
plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
    }),
    new webpack.DllPlugin({
        context: __dirname,
        path: path.join(__dirname, 'build/static/[name]-manifest.json'),
        name: '[name]_library'
    }),
    new HtmlWebpackPlugin({
        filename: path.join(__dirname, 'build/html/index_dll.html'),
        template: path.join(__dirname, 'src/html/index.html'),
        inject: true
    }),
    new webpack.optimize.UglifyJsPlugin({
        output: {
            comments: false,
        },
        compress: {
            warnings: false
        }
    })
]

};

有人遇到这样的问题吗?

Answer 1

终于搞定这个问题了，查了各种关键字。

一毛一样的问题。

先上解决方案。

肯定有人和我一样，把 webpack.config.js / webpack.dev.js 分开的， 不管怎么样， 在你的

new HtmlWebPackPlugin({...})
//下面加入
new AddAssetHtmlPlugin({
  filepath: require.resolve('./dist/static/vendor.dll.js'), // 这个路径是你的dll文件路径 
  includeSourcemap: false  // 这里是因为我开启了sourcemap。 不这么写会报错。
})

add-asset-html-webpack-plugin 这个插件是用来把静态资源加在你的html后面的。

参考资料： https://github.com/superpig/b...

Answer 2

那个缺少括号的问题已经解决了,是我重复开启热模块导致一些文件重复引入了,第一个报错还没有头绪,
然后发现一个新的问题
报错:index.js:854 Uncaught ReferenceError: vendor_library is not defined
这个也没有搞懂是为什么

Answer 3

这是因为你打包出来的vendor.js
没有在你的dist目录里边。