首页 > webpack构建如何保留ko的虚拟元素

webpack构建如何保留ko的虚拟元素

1,项目使用direct.js+ko做单页面应用,使用commonjs模块技术,用webpack做构建。由于页面中使用到了ko的虚拟元素,但是构建是丑化插件会将该虚拟元素删除,导致构建后的代码运行异常。

2.样例代码

var a = require('./js/a');
a();

<!-- ko foreach: items -->

<!-- /ko -->

console.log('hello world');
document.getElementById("container").innerHTML = "

hello world

";

3,webconfig.js如下
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname,"build");
var nodemodulesPath = path.resolve(__dirname,'node_modules');

var config = {
    //入口文件配置
    entry:path.resolve(__dirname,'src/main.js'),
    resolve:{
        extentions:["","js"]//当requrie的模块找不到时,添加这些后缀
    },
    //文件导出的配置
    output:{
        path:buildPath,
        filename:"app.js"
    },
    plugins: [
    //压缩打包的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        //supresses warnings, usually from module minification
        warnings: false
      },
       comments:{
                        value:"/<!--ko/"
       },
        beautify:false
       
    }),
    //允许错误不打断程序
    new webpack.NoErrorsPlugin(),
    //把指定文件夹xia的文件复制到指定的目录
    // new TransferWebpackPlugin([
    //   {from: 'www'}
    // ], path.resolve(__dirname,"src"))
  ]
}
module.exports = config;


4,构建后的文件中,<!-- ko foreach: items --> 被截断了,只剩下 ko foreach: items -->

请教给位大神

【热门文章】
【热门文章】