jharris4 / html-webpack-tags-plugin

lets you define html tags to inject with html-webpack-plugin
MIT License
256 stars 31 forks source link

use it invalidate!!! #42

Closed ab164287643 closed 5 years ago

ab164287643 commented 5 years ago

I set it in the webpack.config.js with production environment

new HtmlWebpackPlugin({
                filename:path.resolve(__dirname,'dist/index.html'),
                template:'./index.html',
                inject: true,//默认值 script位于body底部
                // favicon: 'path/to/my_favicon.ico',
                //压缩
                // minify: {
                //     removeComments: true,
                //     collapseWhitespace: true,
                //     removeAttributeQuotes: true
                //     // more options:
                //     // https://github.com/kangax/html-minifier#options-quick-reference
                // },
                chunksSortMode:'none'
            }),

            //webpack4 css提取  webpack3用得ExtractTextPlugin
            new MinicssExtractPlugin({
                filename: 'css/[name].[contenthash].css',
            }),
            //优化压缩css资源  与vue-cli用的一样
            //详细见 http://www.mamicode.com/info-detail-2316064.html
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.css\.*(?!.*map)$/g,//先行否定断言 .css后面不带 .map
                cssProcessorOptions: {
                    discardComments: { removeAll: true },
                    safe: true,
                    autoprefixer: false,//不 处理前缀
                },

            }),

            //固定module id
            new webpack.HashedModuleIdsPlugin(),
            //固定chunk id
            new webpack.NamedModulesPlugin(chunk => {
                console.log(chunk);
                if (chunk.name) {
                  return chunk.name;
                }
                const modules = Array.from(chunk.modulesIterable);
                if (modules.length > 1) {
                  const hash = require("hash-sum");
                  const joinedHash = hash(modules.map(m => m.id).join("_"));
                  let len = nameLength;
                  while (seen.has(joinedHash.substr(0, len))) len++;
                  seen.add(joinedHash.substr(0, len));
                  return `chunk-${joinedHash.substr(0, len)}`;
                } else {
                  return modules[0].id;
                }
            }),

            //CopyWebpackPlugin ...
            new CopyWebpackPlugin([
                { from: path.join(__dirname, "./static/"), to: path.join(__dirname, "./dist/static") }
            ]),
            new htmlWebpackIncludeAssetsPlugin({
                //这里的路径与CopyWebpackPlugin路径对应
                assets: [
                    "/static/ueditor/ueditor.config.js", 
                    "/static/ueditor/ueditor.all.min.js",
                    "/static/ueditor/lang/zh-cn/zh-cn.js"
                ],
                publicPath: config.publicPath,
                append: false//将资源放在其他资源之前

            }),

but invalidate in my index.js

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/iview/3.3.2/iview.min.js"></script>
<script type="text/javascript" src="/js/app.6f5205ca750472aa25c2.js"></script><script type="text/javascript" src="/js/runtime~app.ebb802c9b4e16089f348.js"></script><script type="text/javascript" src="/js/vendor.c7141cc527e864574ed4.js"></script></body>
</html>

there are no my wanted static file and no errors prompt

ab164287643 commented 5 years ago

I've solved this problem because my production environment used the speed-measure-webpack-plugin plugin, which led to the invalidate of html-webpack-include-assets-plugin, but I still don't know why?