webpack打包weex的问题

问题描述

问 题

我是做安卓的，对前端和webpack不太熟悉，有几个打包的问题想问请教
工程目录如下：

1.生成js的体积

参考playground中的webpack.config.json，我可以将我项目src中的vue文件通过weex-loader打包编译到dist目录。但是文件似乎不是最小体积的，通过weex compile --min命令编译，我的vue文件只有9k，直接使用webpack打包出来的有18k。请问怎么做webpack能够打出最小的体积？

2.资源文件的打包

我在assets目录下有些图片资源，想通过file-loader放到dist里，可是dist里生成的除了资源文件还会有同名的.js文件，请问正确的姿势是怎样的?

我的webpack.config.json如下：

var webpack = require('webpack')
var fs = require('fs');
var path = require('path')

var bannerPlugin = new webpack.BannerPlugin({
    banner: '// { "framework": "Vue" }\n',
    raw: true
})
var entry = {};
var bannerExcludeFiles = [];

function deleteall(path) {
    var files = [];
    if(fs.existsSync(path)) {
        files = fs.readdirSync(path);
        files.forEach(function(file, index) {
            var curPath = path + "/" + file;
            if(fs.statSync(curPath).isDirectory()) { // recurse
                deleteall(curPath);
            } else { // delete file
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
};

function walk(dir) {
  dir = dir || '.'
  var directory = path.join(__dirname, './src', dir);
  fs.readdirSync(directory)
    .forEach(function(file) {
      var fullpath = path.join(directory, file);
      var stat = fs.statSync(fullpath);
      var extname = path.extname(fullpath);
      if (stat.isFile() && (extname === '.vue' || extname === '.png' || extname === '.jpg')) {
        var name = path.join(dir, path.basename(file, extname));
            if (extname === '.vue') {
                entry[name] = fullpath + '?entry=true';
            }
            else {
                entry[name] = fullpath;
            }
      }
      else if (stat.isDirectory() && file !== 'build' && file !== 'include' && file!=='components') {
        var subdir = path.join(dir, file);
        walk(subdir);
      }
    });
}
deleteall(path.join(__dirname, './dist'))
walk();

module.exports = {
  entry: entry,
  output: {
    path: 'dist',
    filename: "[name].js"
  },
  module: {
    loaders: [
        {
            test: /\.(vue)(\?[^?]+)?$/,
            loader: 'weex-loader'
        },
        {
            test: /\.(png|jpg)$/,
            loader: 'file-loader?name=assets/[name].[ext]'
        }
    ]
  },
    plugins: [bannerPlugin]
}

解决方案

问题1：
plugins 加入压缩插件，

plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
        }), bannerPlugin]

同时pagkage.json里对应的打包命令里，加NODE_ENV=production

问题2：
打包时，资源文件不放入entry里。
在代码使用资源文件时，通过

:src=require('../xxx/xx.png')

的方式引用
同时，在webpack的output里配置publicPath

这篇关于webpack打包weex的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！